Replay animation CSS3 every 3 seconds - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

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

Description

Replay animation CSS3 every 3 seconds

Demo Code

ResultView the demo in separate window 

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

body{<!--from   ww w .j  a  va2s. c o m-->
   background: black;
}
.halo{
   width: 263px;
   height: 77px;
   background: url('https://www.java2s.com/style/demo/Safari.png');
}
.halo-robford-animate{
   animation: leaves 3s ease-in-out 3s infinite alternate;
   -webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
   -moz-animation: leaves 3s ease-in-out 3s infinite alternate;
   -o-animation: leaves 3s ease-in-out 3s infinite alternate;
}
@-webkit-keyframes leaves {
   0% {
      opacity: 1;
   }
   5% {
      opacity: 0.5;
   }
   10% {
      opacity: 1;
   }
}
@-moz-keyframes leaves {
   0% {
      opacity: 1;
   }
   5% {
      opacity: 0.5;
   }
   10% {
      opacity: 1;
   }
}
@-o-keyframes leaves {
   0% {
      opacity: 1;
   }
   5% {
      opacity: 0.5;
   }
   10% {
      opacity: 1;
   }
}
@keyframes leaves {
   0% {
      opacity: 1;
   }
   5% {
      opacity: 0.5;
   }
   10% {
      opacity: 1;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="halo halo-robford-animate"></div>  
 </body>
</html>

Related Tutorials