Animations and the Anatomy of Keyframes

If you’re familiar with my other writings or coding projects, you already know that styling is a source of joy. However, even while embracing CSS in all it’s complexity, I was still quite intimidated by animations until recently.

If you are like me, finally mustering the courage to tackle CSS animations, welcome!

Animations are executed with keyframes. Keyframes allow us to define styles like position, rotation, color, etc along the animations journey from start to finish. We call this path the animation sequence. Keyframes give us a ton of flexibility and control over what happens during each step of the animation sequence.

Here’s a simple example:

// style.css
.arrow {
     position: relative;
     animation: bounce 2s infinite;
     color: #F18F43
}
@keyframes bounce {
     0%(top: 0px;)
     60%(top: 20px; color: #E16541)
     100%(top: 0px;)
}

Breaking it down:

At-keyframes is a CSS property. It takes a unique name like bounce. Then in the brackets, it lets you specify how the animation will change throughout its sequence. The percentages in this example are just examples and you can add as many points along the sequence as you’d like. These percentages also take CSS properties like top and color. The values of the top properties in this example, determine how much the arrow moves from its initial state. Because of this top property we also need to set the property position: relative.

We’re ready to call the bounce animation with the CSS property naturally called animation. Animation takes three values. The first is the name of the keyframe, the second is the time for the entire animation to run, and the third is how many times we want the animation to run. In our example, we want the bounce property to take 2 seconds to complete its sequence and run indefinitely.

And that’s it! Once you understand how to write one, animations are a piece of cake. Happy styling :)