CSS Animation Direction – Reverse, Alternate and Reverse-Alternate

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
<div class="box"></div>
<div class="box reverse"></div>
<div class="box alternate"></div>
<div class="box alternate-reverse"></div>
<a href="https://devtutorials4u.co.uk/tag/css-animation/">Free CSS Animation Tutorials »</a>
.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; } <div class="box"></div> <div class="box reverse"></div> <div class="box alternate"></div> <div class="box alternate-reverse"></div> <a href="https://devtutorials4u.co.uk/tag/css-animation/">Free CSS Animation Tutorials »</a>
.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 »

Categorized in:

CSS

Tagged in:

, , ,