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
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.
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?
What's a good way to apply a change to animation delay across many set elements?
If so .element1,... .elementXX have all unique timings. Then you want to change all the delays by 5 extra seconds.
I could use a settimeout to apply an animation start class to the element, but is there should be a more efficient solution?
*Edit
For clarification. Existing animation
.element1{animation: fade 1s linear 1s normal;}
.element2{animation: fade 1s linear 2s normal;}
.element3{animation: fade 1s linear 3s normal;}
.
.
.
.elementXX{animation: fade 1s linear XXs normal;}
Considering that all these animation timings and delays are already set, can you set a delay that increases ontop the existing ones. +10secs etc...
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.
I have a red square moving left and right. And then it stops, how do i make it that it goes on till i leave the web page?
Add the property infinite
For example
-webkit-animation: NAME-OF-ANIMATION 10s linear infinite;
See this example