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;
Related
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 can be a reson of performance drop down. The more times hover starts the greater the delay ... after a few hovers on the animation I have to wait a few seconds.
.post_featured_content{
opacity:0;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.header_featured_posts .featured_item_inner:hover .post_featured_content{
opacity:1;
}
Do I make some stupid mistake?
Ps. I must wait even for hover without transition effect
Certain changes can be costly on the browser. Basically the only things that can be changed and transitioned/animated quickly are:
Position (using transform)
Scale
Rotation
Opacity
Your example only uses opacity. This usually does not lead to performance issues. Are there any other properties being changed? Do they need a transition as well? If the answer's no, change your transition to read transition: opacity .3s ease instead.
If you are changing anything else your browser will need to re-paint the screen the whole time, which can cause performance issues.
If a part of your site is changing a lot of properties, it might be useful to include the following css:
translate3d(0,0,0)
This forces the GPU to create a separate layer to take care of all the changes.
For more information I suggest you take a read here
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;
}
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