CSS animation is powerful. When combined with the power of Sass loops, you can create really interesting animations with a few lines of code. The examples below represent a small range of what you can do with CSS animation.
By using basic CSS transforms, such as scale and rotate, with animation delays, the keyframe animations really come to life.
This tutorial is an introduction to coding cool CSS animations using HTML and CSS. It's meant for those who already have a good understanding of HTML and CSS, with some familiarity with Sass.
From what I've found, the most challenging part isn't understanding the code but rather learning how to experiment. That's why it is important to have real-time visual feedback when coding a CSS animation. I prefer to use a browser-based editor that refreshes automatically as I code. (I recommend CodePen!)
Using CSS keyframes, animation delays, and CSS transforms, we'll create a simple yet interesting CSS animation. Let's get started!
Create an HTML element to animate
Start with a single element. This will form the basis of the CSS animation. To make it easier to manage the animation as a whole, create a wrapper element and set position: absolute on the elements inside.
<!-- HTML -->
Repeat the element to create a pattern
Duplicate the element, then use a Sass loop to space them out. Each can be targeted using the :nth-child selector. To spread the elements out, I’m setting the left property instead of transform: translate() because the transform property will be set as part of the animation later and I don't want to overwrite it.
Keep it simple here. I've found the best way to start adding motion is to create keyframes and animation the transform property. In this example, I'm animating transform: translate(). For the keyframes, I start by keeping it to one or two steps and adding more in later.
This is where the fun comes in! In the @keyframes block, what happens when you change the background-color, opacity, and scale() of the element? By experimenting with different values and properties, you can create many variations using the same basic setup. Try adding in more keyframe steps, adjusting the timing, and changing values until you create something cool and new.