Animation in CSS is the key to create engaging UI. To start with, here is the list of animation properties CSS supports.
|animation-delay||Specifies a delay for the start of an animation|
|animation-direction||Specifies whether an animation should be played forwards, backwards or in alternate cycles|
|animation-duration||Specifies how long time an animation should take to complete one cycle|
|animation-fill-mode||Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)|
|animation-iteration-count||Specifies the number of times an animation should be played|
|animation-name||Specifies the name of the @keyframes animation|
|animation-play-state||Specifies whether the animation is running or paused|
|animation-timing-function||Specifies the speed curve of the animation|
Normally how to setup animation in CSS is by @keyframes.
A typical example would be in AnimateCSS git repo.
But today I will focus on one particular property named animation-timing-function, and its value cubic-bezier.
Cubic-bezier is a maths concept which lays a curve on 1×1 area axes. The curve has 4 points in control, [(0,0), (x1, y1), (x2, y2), (1,1)].
The cubic-bezier only took 2 middle points’ coordinates to determine the curves. To illustrate what it does, a graph from here clarifies the solution.
So the above line translates to cubic-bezier(.27,1.26,.66,-0.36).
Just bear in mind this is only a speed function of timing, reverse on Y axis only means traverse back into the animation process. So this way it can easily achieve the “bouncy” simulation.
Lastly, another interesting site to visit is https://easings.net/. It has the nice illustration of how most curves behave with an buildin animation demo.