CSS Animation Direction – Reverse, Alternate and Reverse-Alternate – CSS Boxes

CSS Animation Direction – Reverse, Alternate and Reverse-Alternate

.box {
  animation: pulsate_background 8s infinite;
  width:50px;
  height: 50px;
  margin-bottom:10px;
}

.reverse {
  animation-direction: reverse;
}

.alternate {
  animation-direction: alternate;
}

.alternate-reverse {
  animation-direction: alternate-reverse;
}

@keyframes pulsate_background {
  0% {
    background-color: #b7b937;
  }
  25% {
    background-color: #3a5a27;
  }

  50% {
    background-color: #42a5b3;
  }

  75% {
    background-color: #682d4b;
  }

  100% {
    background-color: #c22d2d;
  }
}

a {
  padding-top:40px;
  font-family: sans-serif;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  color:#4158D0;
}




 

  
  

  
  

  
  

  
 Free CSS Animation Tutorials »

See the Pen CSS Animation Direction – Reverse, Alternate and Reverse-Alternate by Devtutorials4u (@devtutorial4u) on CodePen.