book now on khaalipaper Best hindi blog and story website

CSS animation Property with example

The CSS Animation property allow to do simple animations without JavaScript. It possible to animate transitions from CSS. Here's a list of some of the great stuff for your websites and web apps creating with CSS animations. CSS Animation property is used as a replacement of animation created by JavaScript.

Swing Animation
<span class="icon-cir"><i class="fa ti-volume swing" aria-hidden="true"></i></span>

.swing {
  animation: swing ease-in-out .6s infinite alternate;
}
Fade In / Fade Out Effect
<span class="icon-cir"><i class="fa ti-volume fadein" aria-hidden="true"></i></span>

.fadein {
    animation: fadeIn ease-in-out .6s infinite alternate;
}
Rotation Animation
<span class="icon-cir"><i class="fa ti-settings rotation" aria-hidden="true"></i></span>

.rotation {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
Loader Spin
<div class="spinKit"></div>

.spinKit {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid blue;
  border-bottom: 4px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: block;
  margin-bottom: 5px;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
Zoom Effect / Scale
<div class="dash-icon"><i class="fa ti-settings" aria-hidden="true"></i></div>

a:hover .dash-icon {
    transform: scale(1.3);
}
Live Chatbot
animation css
<div id="genie"><img width="51" height="104" src="../img/genie.png"></div>
  @-webkit-keyframes chatbot {
   0% {
  transform: translateY(-5px)
  }
   50% {
  transform: translateY(10px)
  }
   100% {
  transform: translateY(-5px)
  }
  }
   @keyframes chatbot {
   0% {
  transform: translateY(-5px)
  }
   50% {
  transform: translateY(10px)
  }
   100% {
  transform: translateY(-5px)
  }
  }
  #genie {
  	width: 51px;
  	-webkit-animation: chatbot 3s infinite ease-in-out;
  	-o-animation: chatbot 3s infinite ease-in-out;
  	-ms-animation: chatbot 3s infinite ease-in-out;
  	-moz-animation: chatbot 3s infinite ease-in-out;
  	animation: chatbot 3s infinite ease-in-out;
  }

Transitions and animations, scale, rotate, translate and transform