CSS animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. In this article, we will uncover the basics of CSS animation and making a simple loading spinner. CSS Animation is extremely powerful and should not be underestimated just because we are making a basic loading spinner.

Let's Get Started

First, we are going to make a new index.html file and add this simple template.

<div class='spinner'></div>

The next thing we are going to do is the CSS, so make a <style> tag. First, we need a simple circle with one side blue. Here is the following template.

.spinner{
  width:80px;
  height:80px;
  border:10px solid #fff;
  border-radius:50%;
  border-left-color:blue;
}

Let's Apply The animation

To make an animation, we have to apply a set of keyframes, keyframes are just states (initial, final) in the animation.

@keyframes spin{
 from{
  transform: rotate(0deg);
 }
 to{
  transform: rotate(360deg);
 }
}

Keyframes

What we are doing is defining keyframes spin (it can be called whatever you want) with state from (which represents the starting point in the animation) to (the final state in the animation ). So it starts out as 0deg and it is going to rotate all the way up to 360deg. What we need to do next is to apply the animation, to do this we have a handful of animation properties.

.spinner {
  width:80px;
  height:80px;
  border:10px solid #fff;
  border-radius:50%;
  border-left-color:blue;
  animation-name:spin;
  /* the name of our keyframes */
  animation-duration:2s;
  /* how long the animation will be */
  animation-iteration-count:infinte;
  /* how many times the animation should play can be 2 |3 | infinte */
}

we could also shorthand it with the animation property.

.spinner {
  animation: spin 2s infinite linear;
}

In Conclusion

Now, that you know have the basics of CSS animation I recommend you experiment with it, in fact here is a challenge, make an animation that makes your h1 grows and shrink in font-size. To learn more about CSS animation click here and leave a reaction and do not forget to follow me for better content.