How to animate objects using @keyframes CSS3 rules

CSS3 provides us a way to animate our objects using @keyframes css rule. In the below example we will animate a spinner using @keyframes rule.

Steps:

1.  Create an html page and add below HTML5 section element to it:

 <section class="spinner-animate">
<div class="spinner"></div>
</section>

2. Add following CSS3 properties:

section {
  position: relative;
  margin-bottom: 40px;
}
.spinner {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.spinner-animate {
  height: 100px;
}
.spinner-animate .spinner {
  width: 100px;
  height: 100px;
}

.spinner-animate .spinner:before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: solid 20px #ff3c50;
  border-bottom: solid 20px #ff3c50;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  content: "";
  border-radius: 50px;  
 animation: spinner-animate 1s infinite ease; (Animation property to get @keyframe css function).
}

Note: spinner-animate is the rule created to add animation effects to the spinner.

.spinner-animate .spinner:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  background-color: #28aadc;
  content: "";
  border-radius: 20px;
}

3. After adding above css, you will see the below spinner on your web page.

If you want to add animation effects to the spinner, you can create keyframes rule with spinner-animate:

@keyframes spinner-animate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

To control the animation speed:

@keyframes spinner-animate {
  from {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(60deg);
  }
  50% {
    transform: rotate(260deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

;