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

A four-step practical approach for making your web app load faster

Flutter Create: A back-end dev gets Flutter running for the first time

Bad Sector Mac Hard Drive Recovery Software to Retrieve Files from Bad Mac Hard Disk Drive

Procedures to develop Node-RED node from OpenAPI document

Top 10 outsourced Docker experts

ViteX Gateway Incentive Plan

How to deploy django with uwsgi and nginx using Ansible play book.

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

How I created the front end for a coin flip game that allows two people to play against each other

Design to CSS: How to adjust position while converting FIGMA & SKETCH


Understanding Media queries in CSS