Cool Loading Dots Animation | CSS Tutorial

In this video I go over how to create a loading dot animation using only HTML & CSS. I show you how to create a keyframe animation that modifies an element's position and color. I create two animations and use div:nth-child(odd) and div:nth-child(even) to specify which animation each dot displays. I then add a cubic bezier curve to add a pop effect to the animation.

Code: https://codepen.io/angeladelise/pen/jOPyarL

I show you:
0:23 - HTML code
0:50 - Initial div styling
1:17 - Display flex & Justify-content center
1:56 - Animation setup
2:33 - How to create a keyframe animation
2:58 - How to translate the div
3:54 - How to use nth-child odd and even
5:13 - How to add a cubic bezier curve
5:43 - How to animate color

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise