How to create animations using only CSS and @ keyframes
Learn a no-JavaScript technique using only the CSS animation property
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…
