Two square moving with different speed and following each other - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Speed

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

Description

Two square moving with different speed and following each other

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#div {<!--from  www.ja  v a2s. co  m-->
   position: absolute; top: 50px;
   width: 100px; height: 100px; background: blue;
   -webkit-animation-name: shift;
   -webkit-animation-duration: 10s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: reverse;
}
@-webkit-keyframes shift{
   from{
      top: 50px;
      left: 0px;
   }
   10% {
      top: 150px;
      left: 100px;
   }
   50% {
      top: 400px;
      left: 500px;
   }
   to {
      top: 50px;
      left: 0px;
   }
}
#div2 {
   color: red; position: absolute; left: 200px;  top: 50px;
   width: 100px; height: 100px; background: blue;
   -webkit-animation-name: shift2;
   -webkit-animation-duration: 10s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: normal;
}
@-webkit-keyframes shift2{
   from{
      top: 50px;
      left: 200px;
   }
   20% {
      top: 150px;
      left: 300px;
   }
   to {
      top: 400px;
      left: 500px;
   }
}


      </style> 
 </head> 
 <body> 
  <div id="div">
    this is a test
  </div> 
  <div id="div2">
    this is a test
  </div>  
 </body>
</html>

Related Tutorials