• Seo Expert
  • Khaali Paper

Animation CSS

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

Transitions and animations, scale, rotate, translate and transform elements using CSS