Keyframe Animation Original Position - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Keyframe

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

Description

Keyframe Animation Original Position

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Tim Plummer</title> 
  <style>

@keyframes animatedBackground {<!--from   w w w .j ava  2s .  c  o  m-->
   0%{
      left: -200px;
   }
   100% {
      left: calc(100% + 200px);
   }
}
body {
   overflow: hidden;
}
.hare {
   position: absolute;
   width: 140px;
   animation: animatedBackground 2s infinite;
   animation-timing-function: linear;
}
.tortoise {
   position: absolute;
   top: 50%;
   width: 200px;
   animation: animatedBackground 40s infinite;
   animation-timing-function: linear;
}


      </style> 
 </head> 
 <body translate="no"> 
  <img class="hare" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
  <img class="tortoise" src="https://www.java2s.com/style/demo/Opera.png">  
 </body>
</html>

Related Tutorials