How to animate objects using @keyframes CSS3 rules

Author - Kuldeep Singh
1.05.2018
|
0 Comments
|

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);
  }
}

;

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *