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 :)

Full-Stack Software Engineer, Designer, and salsa dancer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Transaction & Transaction Processing : A brief description

Using Firestore — From hate to love

This app gonna change Casino business “CASICURATOR”

A Step Further towards the democratisation of Cauldrons

GRIT: a Protocol for Distributed Transactions across Microservices

My Simple Python Development Setup

🔅Automating LVM Partition using Python-Script.

Top 10 Popular Apps Built with React Native

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lydia Gregory

Lydia Gregory

Full-Stack Software Engineer, Designer, and salsa dancer.

More from Medium

CSS Lesson 2: Fun with Fonts

Riot Games Client UI clone with HTML and CSS

Riot games clone desktop

Squarespace Header Button CSS Tips

New CSS Property: aspect-ratio