How to Animate With CSS

Mike Pottebaum
Oct 19 · 3 min read
Image for post
Image for post

From the moment I first started learning CSS, I was simultaneously excited and terrified of learning CSS animations. On the one hand, animations are maybe the most exciting and fun aspect of CSS. The simplest animation can breathe life into a user interface and completely transform it.

On the other hand, it’s very hard to make really visually interesting animations. As someone relatively new to web development, I wasn’t sure that diving deep into CSS animations was the best use of my time, but ultimately I had to try them out. They turned out to be just as fun and difficult as I expected.

Animation vs. Transition

When I first started playing around with CSS animations, I thought it would be cool animate some text when you hovered over it. I had already set an animation on this piece of text, but I assumed I could set a new animation property using the :hover pseudo-class.

This resulted in some strange behavior. When I hovered over the text, it switched erratically between the two different animations. What I really wanted to use here was a transition.

Transitions are the better choice for animating transitions to pseudo-class states. Using the transition property, you can tell CSS which property’s transition to animate and for how long.

Here, I’m telling CSS to transition all transition-able properties for 2 seconds using the timing function ease-in. A timing function is an acceleration curve for the transition. You can read more about the different options here.

You can also specify a delay in seconds as the fourth value of the transition property.

Keyframes

Transitions are a nice way to ease in to CSS animations. But the really fun part is using the keyframes at-rule to map out a more complex animation. If an animation sequence is a trip, keyframes are the different stops along the way.

Declaring an animation sequence is as easy as saying: I want this DOM node to change from this property value to this property value:

Only the from and to states are required, but you can declare any intermediate point between them using percentages. Now, this is only declaring how the animation sequence will proceed. To actually animate a specific DOM node, we have to tell that node to use this rainbow animation.

This is where the different animation properties come in. There are a lot of different properties you can use for animations, or you can use the all-inclusive animation property that works similar to the transition property used above. I’m going to use the separate, specific properties because I think it’s easier to follow.

In the above keyframes declaration, we named our animation sequence rainbow. So, to attach this animation to a DOM node, we simply tell it to use the animation rainbow:

You can probably guess what’s going to happen based on the last property. The container will change from red to orange to yellow to green to blue to indigo in the span of one second and repeat that sequence infinitely.

The cool thing about CSS animations is that they’re reusable across different DOM nodes and each DOM node can be assigned multiple animations. To assign multiple animations to a DOM node, just separate them by commas like this:

The rainbow animation settings are the same as before. Only now, we a second animation declared named slidein with a duration of 3s and an iteration count of 1.

Those are the basic tools for creating CSS animations. As you can see, learning the how is surprisingly straightforward. Although, like most of CSS, animations are easy to learn, but hard to master. I’ll be playing around with them some more and hopefully will have something cool to share as a follow up in the near future.

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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