I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.
It works fine in Chrome.
http://codepen.io/chrismorrison/pen/rmLXWw
#rays {
animation: spin 6s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
}
#keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.
I had a similar issue which I was able to resolve by adjusting the SVG's viewport attribute so that i could set
transform-origin: 0 0;
for the element I need to transform.
I've created a pen here showing the difference between the two: https://codepen.io/mbrrw/pen/NWxMamm
For a 20x20 circle, I changed the viewBox from 0,0,20,20 to -10, -10, 20, 20.
Hopefully this helps!
I know this is a very old question, but I've spent the last hour trying to come up with a solution and I wanted to share my solution in case it ever happens to anyone else!
Just like the OP, zooming in or out in Safari would screw up my transform-origins and they would be based on what the original size of the SVG pre-zoom. In my example, I was trying to rotate with a transform-origin of 100% 0%.
My fix (using Javascript): transform-origin: svgElem.currentScale * 100 + '% 0%';
Now, instead of having my rotate be off-axis, it's always in the right position.
Hopefully that helps someone!
Chrome's implementation of transform-origin is different from other browsers. Try using absolute coordinates.
-webkit-transform-origin: 201px 191px;
transform-origin: 201px 191px;
I'm not sure if this will fix your Safari problem, but it is good practice anyway. Especially if you want it to work in Firefox also.
I fixed it using rem unit to set transform-origin.
.logo-spinner path {
animation: my-spinning-animation 1.8s infinite ease;
transform-origin: 3rem 3rem;
}
Now, animation always remains centred while zooming-in/out on Safari.
(Except for the smallest zoom level which I think is acceptable)
Related
I have a CSS3 rotate transform with a cubic-bezier transition-timing-function, it is working fine on mouse over, but i want to disable the mouseleave animation. I prepared a simple jsFiddle to show you.
img {
transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
img:hover {
transform: rotate(360deg);
}
You mean you don't want it to transition back when you hover off? You can use an "infinite" (actually very large) transition-delay (that's the second time value in the shorthand) for that.
Like this:
demo
CSS:
img {
transition: 0s 99999s; /* transition when mouse leaves */
}
img:hover {
transform: rotate(360deg);
/* transition on mouseover */
transition: 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
Note that this will make the image rotate only on first hover.
If you want to make it rotate for each hover, then you'll have to use keyframe animations. Like this:
demo
CSS (no prefixes, you'll have to add them):
img:hover {
animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
#keyframes rot {
to {
transform: rotate(360deg);
}
}
Also, I noticed that you were writing the unprefixed property first - you should always put it last. Especially now, when the coming versions of IE, Firefox and Opera are unprefixing transitions.
I'm trying to get this animation to work in Chrome:
#-webkit-keyframes flipAnimation {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-webkit-transform-origin: right center;
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-webkit-transform-origin: right center;
}
}
#-webkit-keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes disappear {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.flipAnimation {
opacity: 0;
-webkit-backface-visibility: visible !important;
-webkit-animation: flipAnimation .5s, appear .2s, disappear .3s;
-webkit-animation-delay: 0s, .3s, 2s;
}
But it's always glitchy. For one, the div.flipAnimation doesn't appear with opacity 0. Second, the div flashes in and out and the last disappear animation doesn't seem to trigger properly. Is there a problem with have 2 opacity animations in the same animation even though they're spaced with delays?
I'm not quite sure if this is the desired effect are you aiming for, but you can look up at my solution:
JS Fiddle demo
I think the effect you are looking for cannot be achieved with keyframes. Please confirm if this is satisfactory!
Here the code working.
Demo Jsfiddle
the reson that it was not work is the delay time. you could not see the different.
so I change the delay time for 10 sec just for you see that it is work.
Your code work with other delay
I make some change in the code for to see that is work, just change the time and ather thing according your request:
first you see the appear ,flipAnimationu working togther after 20s you will see the disappear work and change color to azure,black,azure.
Looks like this can't be done with key frames alone. I'm going to use jquery to do the final fade out animation.
I use CSS3 Keyframes to make a image circle run without moving, i means like a wheel but circle not moving, it stay as it is.
Here is my CSS code :
.step_7 {
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px;
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
#-webkit-keyframes circle-run
{
0%{
-webkit-transform:rotate(0deg);
}
100%
{
-webkit-transform:rotate(360deg);
}
}
.animation {
-webkit-animation: circle-run 2s infinite;
-webkit-animation-timing-function:linear;
}
Javascipt :
$('.btn1_inv').click(function () {
$('.step_7').addClass('animation');
});
here is my sample code :
http://jsfiddle.net/vLwDc/25/
From these above code, my element run but it move a little bit, how can i fix it ? thanks in advance .
do you mean why is it wobbly ? if so it's coz width height are different so it will be like that as it's not a perfect circle
Starcraft 2 has a nice autocast animation ( http://youtu.be/p34SNJGmNE8?t=50s ) that I want to replicate on the refresh button on one of my widgets.
If my button were circular, it would be possible to use an orbit transform to do the animation but what can I do in my case with a square button?
It's fairly easy with keyframe animation.
Unfortunately only Firefox supports animating pseudo elements at this time, but here is an example
of the effect.
It works by animating the absolute positioned pseudo-element coordinates.
Here is the necessary code:
a {
display:block;
height:50px; width:50px;
position:relative;}
a:after,a:before{
content:'';
width:5px; height:5px;
display:block;
position:absolute;
-moz-animation: autocast 2s infinite;
background:black;
}
#-moz-keyframes autocast {
0% {top:0; left:0;}
25% {top:0; left:45px;}
50% {top:45px; left:45px;}
75% {top:45px; left:0;}
100% {top:0; left:0;}
}
a:before{ -moz-animation-delay: 1s;}
You could also animate the trailing glow of the moving boxes with multiple box-shadows, perhaps.
For my isotope container, whenever I insert a new item into the container... it initially appears in the top-left of the container (so in the position of the first item) and then it animates by moving down into place where it should go based on sorts.
Here is an example of what I would like to happen though: http://jsfiddle.net/aaairc/H4ZMV/5/. As you see in that example, the new item zooms in starting from the position that it is going to take within the container.
I haven't been able to replicate the issue I'm seeing locally on jsfiddle yet, but I thought someone might have an initial suggestion or point me to what in my jsfiddle example is actually enabling the insert to have the nice zoom in functionality. Is that just default? Something related to the CSS?
Also, not sure if this is relevant, but the container items of my isotope instance or all jpgs.
It had to do with how you specify the CSS. When I changed my CSS over to this it worked how I expected would like.
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
This feature has been built into Isotope v1.4. See Metafizzy blog: Isotope v1.4 - refined inserting animation