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.
Related
How animation-timing-function's values "Ease" and "Ease-in-out" differ from one another . ALthough they both means the same i.e.
ease -It specifies an animation with a slow start, then end slowly (this is default)
ease-in-out -It also specifies an animation with a slow start and end.
animation-timing-function: ease;
animation-timing-function: ease-in-out;
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?
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;
}
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