About cubit bezier function And animation in CSS

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.

Happy animating!

Posted in CSS