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

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