Example CSS using animation and @keyframes

How to create animations using only CSS and @ keyframes

Learn a no-JavaScript technique using only the CSS animation property

Christina Truong
11 min readNov 12, 2021


Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.

Adding dynamic elements to your website usually requires JavaScript. But the animation property and the @keyframes rule can be used to add animation effects using only CSS!

What is @keyframes?

Before we get too deep into the animation properties, let's take a step back and talk about how to create the actual animation itself. CSS properties are used to define styles. CSS at-rules are statements used to provide CSS instructions.

For animations, the @keyframes rule is used to define the sequence of the animation and which styles are to be animated.

Let’s look at an example. Below is a website I created for my podcast. It’s a pretty basic page so I wanted to add a little something to it. I used the same five colors, seen in the cassette tape in the logo, as the page’s background colors. With @keyframes I was able to cycle through the colors and make them fade between each change, on a continuous loop.

example website, troypodcast.com, showing an animation effect
example site: troypodcast.com

Previously, I’ve talked about using the transition property to animate style changes. But transition only allows you to have a start and end point. So in this example, I would have only been able to transition between two colors: one at the start and one at the end.

With @keyframes, more complex effects can be created by setting multiple points for your animations, which in this case, allows me to use as many colors as I want.

How to use @keyframes

To create this effect, start with the @keyframes keyword.



Christina Truong

Tech Educator. christina.fyi Twitter @christinatruong Instagram @christina.is.online