Mastering CSS Animations with @keyframes

As the web has become more interactive, the expectation that our websites and applications will do more than present data and react to user inputs has increased. CSS animations are one way that we can add life to our web projects by creating smooth transitions and effects that will help enhance user experience.

At the core of CSS animations is the @keyframes rule, which defines the intermediate steps for an animation sequence to follow. In this article, I intend to describe and discuss how @keyframes works and how you can use it to create visually engaging animations.

What is @keyframes?

In CSS, the @keyframes rule enables us as developers to specify how an element's style should change at different points during an animation sequence. It provides a framework for defining key steps (or frames) in an animation timeline.

Syntax

@keyframes animation-name {  0% { /* Initial styles */ }  50% { /* Midpoint styles */ }  100% { /* Final styles */ }}

Here, we define three states for the element to animate between:

• 0% represents the starting state of the animation.
• 100% represents the end state.
• We can define as many intermediate steps as our animation needs using percentages.

A Basic Example

As a very basic example, here's a simple animation which moves a box 300px across to the right over three seconds:

@keyframes moveRight {  0% {    transform: translateX(0);  }  100% {    transform: translateX(300px);  }}.box {  width: 100px;  height: 100px;  background-color: steelblue;  animation: moveRight 3s linear;}

In this example:

• The animation is called moveRight.
• The @keyframes rule defines a starting position (translateX(0) at 0%) and end position (translateX(300px) at 100%).
• Because this is only a simple, linear animation, we only need to define the starting and end states, the browser will calculate the movement between these two.
• This is applied to .box by specifying the animation name (moveRight), duration (3s), and timing function (linear).

Adding Intermediate Steps

Because we can define the state at any point within the animation duration (and accept that the browser will work it out for us), we can use intermediate steps to make our animations more dynamic.

Using my example from above, for example. If we add a step at 50%, we can put a step in where it moves the majority of the way rightwards (200px) in the first half of the animation duration, and then the last 100px at a slower pace.

@keyframes moveRight {  0% {    transform: translateX(0);  }  50% {    transform: translateX(200px);  }  100% {    transform: translateX(300px);  }}

If we apply this with the same three‑second duration as before, then the box will move 200px in the first 1.5 seconds, and then the remaining 100px during the last 1.5 seconds ‑ half the speed.

You could also use these steps ‑ for example ‑ to produce a bouncing animation like this:

@keyframes bounce {  0% {    transform: translateY(0);  }  50% {    transform: translateY(-50px);  }  100% {    transform: translateY(0);  }}.bouncing-box {  animation: bounce 1s ease-in-out infinite;}

Here:

• The element moves up midway through the animation (translateY(-50px) at 50%), and returns to it's original position at the end (translateY(0) at 100%).
• Because we're using the infinite keyword, the animation will repeat endlessly, making the .bouncing‑box element bounce up and down.

Controlling Animations

Aside from defining the keyframes themselves, CSS provides several properties that allow us to control animations when using @keyframes:

• animation‑duration defines how long the animation should last (e.g., 3s or 500ms).
• animation‑timing‑function controls the speed curve (e.g., ease, linear, ease‑in‑out, etc).
• animation‑delay delays the start of the animation.
• animation‑iteration‑count specifies how many times the animation runs (e.g., 1, 2, infinite).
• animation‑direction defines whether the animation plays forwards, backwards, or alternates (e.g., normal, reverse, alternate).

These properties can also be combined together into a single shorthand animation property, using the following syntax:

animation: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction>;

For example:

animation: moveRight 3s ease-in-out 1s infinite alternate;

Browser Support

As with many of these emergent CSS3 properties, browser support can be patchy. However, at the time of writing, support for @keyframes is actually very good. @keyframes is widely supported in all modern browsers, including Chrome, Firefox, Edge, and Safari.

However, older versions of Internet Explorer (specifically IE9 and earlier) do not support CSS animations. For IE10 and early versions of Safari, you may need to include vendor prefixes like ‑webkit‑:

@-webkit-keyframes moveRight {  0% {    transform: translateX(0);  }  100% {    transform: translateX(300px);  }}

Wrapping up

The @keyframes rule is a cornerstone of CSS animations, allowing us to define simple (or very complex) animations on a frame‑by‑frame basis. It offers flexibility and power to create engaging, visually dynamic web elements.

Key Takeaways

• The @keyframes rule defines how an animation progresses through a timeline from 0% to 100%.
• Use animation properties like duration, timing‑function, and iteration‑count to control animations.
• Include vendor prefixes for older browser support (e.g., ‑webkit‑ for Safari).
• With its broad support in modern browsers, CSS animations are a reliable way to enhance interactivity and design.

Animations can transform a static webpage into something interactive and engaging, as websites become more animated and microinteractions become more popular, @keyframes should be a key part of any front‑end developers skillset.