In this article, we’ll talk about how you can change animation behavior over time.
Keyframes. Advanced Settings
As we remember from the previous part of this article, any keyframe is created using , with curly braces where we define the state of a specific element at a specific time. These settings are made using the keywords and , where all changes to our object are applied.
However, as animation complexity and requirements grow, developers often find the standard CSS commands and insufficient. For this reason, the consortium introduced an alternative: defining keyframes not only with keywords, but also using percentages. What does this mean? The answer is simple: we can control an element on the page at any point during the animation.
To clarify everything, let’s look at a small example. We have a keyframe that moves an element to the right from to , and in addition, our “test subject” will gradually change color from red to violet (through the colors of the rainbow!). So, our keyframe will look like this:
Now, let’s link this keyframe to our styles. Suppose we have the following HTML code:
We want the block to move to the left and change color when hovered. Let’s write the CSS:
Demonstration:
In practice, we’ve seen that defining keyframes using percentage values is much more efficient than relying solely on and .
Timing Functions
Sometimes you need an element on the page to start moving very slowly and then suddenly speed up. The property helps us achieve this behavior.
Developer, remember! There is nothing in common between animation-timing-function and animation-duration. The first property defines HOW the element behaves on the page, while the second — the DURATION of the entire animation.
has several values: , , , and (I’ll explain later why cubic-bezier uses parentheses).
To better understand these values, let’s recall some basic physics (don’t worry, it’s simple).
Uniform motion — motion where an object covers equal distances in equal time intervals. This corresponds to the value.
Indeed, if we create an animation and apply it to an element with a linear timing function, the object will move smoothly and evenly.
Demonstration linear:
Acceleration is the rate of change of velocity over time. Uniformly accelerated motion is motion with constant acceleration.
Uniform acceleration corresponds to the , , and (partially) values.
means the element will keep accelerating until the animation ends (after which it simply stops).
Demonstration ease-in:
On the other hand, is conceptually opposite to . With ease-out, the element slows down toward the end of the animation (again, referring to uniform acceleration).
Demonstration ease-out:
is a bit more complex. Its logic: the first half of the animation runs with , and the second half with .
Demonstration ease-in-out:
And finally, the most complex value — . It defines custom animation behavior using coordinates inside parentheses (x1, y1, x2, y2).
Why coordinates? Because the animation follows a Bézier curve, which is described using those exact points. To understand how Bézier curves work, I recommend checking out visual tools online to see them in action.
Here, I’ll show an example with the following Bézier coordinates: .
Demonstration cubic-bezier:
Conclusion
This article helped us understand how to flexibly control CSS3 animations. The most important thing is that there’s nothing difficult about it — we just reviewed a few examples, and now I believe anyone who reads this post can create their own interesting CSS3 animation.
If you missed something or didn’t fully grasp the keyframes topic, I recommend going back to the first part of this article. I’m sure it will help.
In the next article, I’ll cover all the nuances of animation settings, and the topic will be fully revealed!
Happy experimenting!