Difference Between CSS3 Transition Transition and Simplicity

Question

What is the difference between CSS3 ease-in , ease-out transitions, etc.?

Answer 1

CSS3 transitions and animation support facilitate the process, formally referred to as the "sync feature." Common are ease-in , ease-out , ease-in-out , ease and linear , or you can specify your own using cubic-bezier() .

• ease-in will start the animation slowly and end at full speed.
• ease-out will start the animation at full speed, then finish slowly.
• ease-in-out will start slowly, be fastest in the middle of the animation, and then end slowly.
• ease is similar to ease-in-out , except that it starts a little faster than it ends.
• linear does not use attenuation.
• Finally, here is a great description of cubic-bezier syntax, but it is usually not required unless you want very precise effects.

In principle, attenuation is deceleration, attenuation is slow acceleration, and linear is not to be done. Detailed resources can be found in the documentation for timing-function in MDN .

And if you really want to get the above exact effects, you will be amazed at the amazing Lea Verous cubic-bezier.com ! Its also useful for graphically comparing various synchronization functions.

Another synchronization steps() function acts as linear , but only performs a finite number of steps between the start of the transition and its end. steps() was most useful to me in CSS3 animations, not transitions; A good example is loading indicators with dots. Traditionally, a series of still images has been used (for example, eight dots, two changing the color of each frame) to create the illusion of movement. With the steps(8) animation and rotate transform, you use motion to create the illusion of individual frames! So funny.