Is it possible to prevent the small 'lag' at the end of a css animation?
I am trying to have 4 balls spin around each other constantly. They spin fine, but at the end of each 360deg cycle, there is a very short but noticeable pause.
I know 'animation-fill-mode: forwards' is supposed to make the animation remember its' final state but that doesn't seem to fix the issue.
Perhaps there is a better way to set-up the rotation than the method I have used? Which makes the transition between each animation iteration smoother...
#keyframes container-rotate {
to {transform: rotate(360deg); }
}
animation-name: container-rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
Example here:
http://codepen.io/Recidvst/pen/wGbjvz
Thanks!
Try changing the value of your animation-timing-function to linear. You're currently using ease-in and ease-out which vary the speed of the animation at the beginning or end. linear will use the same speed the whole time.
Updated CodePen.
Here's some info on what the various timing functions look like on a graph across time.
Have you tried animation-timing-function: linear;? or just leaving it as the default ease?
Related
I have a CSS keyframes animation that I'm using like so:
.content[docked=true] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: normal;
animation-fill-mode: forwards;
}
.content[docked=false] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: reverse;
animation-fill-mode: backwards;
}
When the docked attribute is set to true, it animates as expected. Afterwards, when the docked attribute is set to false, it doesn't animate and instead snaps to the initial values (0% -- it's running in backwards) as if there were no animation at all. The animation is still being run through though, because I am not setting the CSS rules back to their starting values anywhere except for the animation. After reverting the docked attribute to false, setting it to true again results in the same 'jump' with the expected end values but no transition or value interpolation. Why is this happening?
My animation is too elaborate to use transitions because it sets values in non-linear ways along its duration. That's exactly why I'd prefer not to have to make a second animation with all the values flipped.
I often get warnings from my CSS files about invalid CSS Properties when I'm using a series of browser specific properties as follows:
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
In this case Chrome whines as follows: Invalid CSS property value: spin 2s infinite linear. I know it's ignorable because:
a) Chrome uses webkit
b) the .icon-spin class works just fine.
I dislike warnings...ignoring them is almost always wrong. Any chance there's a way to either
a) resolve the warning by changing code like that
or
b) supress css warnings in this sort of context?
Also note that I've seen this in other contexts, where the non-vendor-prefixed css property is still non-compliant.
Why does Firefox reverse an animation back to the start if you remove it whereas webkit snaps it back to the start position? Is there a difference in how they handle this?
I have an animation that flips an image of a record sleeve downwards towards the viewer (in 3D). The idea is to simulate flipping through records.
As the first image flips down you can see the back image appear and also reveal the next image behind it.
It uses fill-mode forwards to stop the animation at the end and there is a callback listener set up which I use to update the 'front' image' because, thanks to backface-visibility, at this point it's hidden. It's actually updated to be the image that was revealed behind so that once it returns to the start point it will be come the next image to flip down.
Once that's done I use document.getElementById('flip_rec').className=''; to remove the animation. This returns the animation to the start point and makes it ready to restart it next time. I then update the now hidden reverse and behind images and set a flag to allow the animation to run again.
All that is important because when I remove the image in webkit it snaps the animation back to the start instantly - which works great because you don't notice the fact that the images have been replaced - but with Firefox it reverses the animation. So you see the image flipping backwards, revealing the new front image gradually and allowing you to see the behind image updating. The effect is ruined.
This is the CSS I'm using to set the animation up.
.flip1
{
-webkit-animation-name: mymove1;
-moz-animation-name: mymove1;
animation-name: mymove1;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-animation-timing-function: linear;
/*don't go back to that start! Yet.*/
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
this is my css to do animation.
transform: scale(0) rotateY(180deg);
I have to give separate transition-timing-function for scale and rotate. But as per my research, i am able to give like below only, which actually gives same easing function for scale and rotate.
transition: transform .7s ease-in-out;
Any one knows to give separate timing function for scale and rotate.
you can crate multiple animations, the first one would scale and the second would rotate, and assign different easing duration to each of them. multiple animations can then be assigned to a single element.
see this guide http://css-tricks.com/snippets/css/keyframe-animation-syntax/ on how to implement this
quote from the link:
Multiple animations -
You can comma-separate the values to declare multiple animations on a selector.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}
I trying to spin an image using CSS keyframes to rotate(360deg). I used keyframe, but every time when animation is complete there is some kind of delay. Also I tried to set 100% { -webkit-transform: rotate(359deg) }, but it didn't work out, I still get that delay. Do you have any idea to prevent it from delaying after every animation?
Here is the link of what I've done so far.
Thanks in advance!
The default value for the animation-timing-function property is ease so your animation slightly accelerate at the beginning and decelerate at the end. This gives you the sense of delay between the loops.
Set the value to linear to have an infinite linear animation:
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
DEMO