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.
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.
@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