Fly from left to right with different speed - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Speed

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

Description

Fly from left to right with different speed

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Animation Demo</title> 
  <style>

@keyframes anim-1 {<!--  w ww .  j a v  a  2s  . co  m-->
   0%,20.00% { left: -100%; opacity: 0; }
   20.00%, 50.35% { left: 15%; opacity: 1; }
   50.35%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-2 {
   0%, 40.35% { left: -100%; opacity: 0; }
   40.35%, 75.29% { left: 20%; opacity: 1; }
   75.29%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
   0%, 30.00% { left: -100%; opacity: 0; }
   30.00%, 70.62% { left: 20%; opacity: 1; }
   70.62%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-4 {
   0%, 40.00% { left: -100%; opacity: 0; }
   69.00%, 90.62% { left: 15%; opacity: 1; }
   91.65%, 100% { left: 110%; opacity: 0; }
}
html{
   background-color: #333;
   width: 1200px;
}
.animate-container{
   position: relative;
   height: 130px;
   width: 99%
}
div[class*="animation"] {
   width: 100px;
   height: 100px;
   background-color: brown;
   margin-bottom: 30px;
   position: absolute;
   font-size: 3em;
   color: white;
   text-align: center;
   line-height: 100px;
}
.animation1{
   animation: anim-1 5s infinite;
}
.animation2{
   animation: anim-2 5s infinite;
}
.animation3{
   animation: anim-3 5s infinite;
}
.animation4{
   animation: anim-4 5s infinite;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="animate-container"> 
   <div class="animation1">
     1 
   </div> 
  </div> 
  <div class="animate-container"> 
   <div class="animation2">
     2 
   </div> 
  </div> 
  <div class="animate-container"> 
   <div class="animation3">
     3 
   </div> 
  </div> 
  <div class="animate-container"> 
   <div class="animation4">
     4 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials