Animate a CSS element forever - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Animation Control

Description

Animate a CSS element forever

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.bg {<!--from   w  w  w . j a v a  2 s .c  o m-->
   background: black; 
}
.rainbow-bar {   
height: 3px;
animation: move .75s ease infinite;
}
@keyframes move {
   0% {
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
   }
   14.3% {
      background: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
   }
   28.6% {
      background: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
   }
   42.9% {
      background: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
   }
   57.2% {
      background: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
   }
   71.5% {
      background: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
   }
   85.8% {
      background: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
   }
   100% {
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="bg"> 
   <div class="rainbow-bar"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials