Change background position in animation - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:background

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. background

Description

Change background position in animation

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <meta name="description" content="animate using css, using step"> 
  <style>

body {<!--   w  w  w . j a va2 s .  c  o  m-->
   width: 100%;
}
.animate {
   background-image: url(https://www.java2s.com/style/demo/InternetExplorer.png);
   width: 100%;
   height:500px;
   background-size: 500% auto;
   animation:play 2s infinite steps(5);
   -webkit-animation:play 2s infinite steps(5);
}
@keyframes play
{
   0%   { background-position: 0, 0; }
   100% { background-position: 500%, 0; }
}
@-webkit-keyframes play
{
   0%   { background-position: 0, 0; }
   100% { background-position: 500%, 0; }
}

      </style> 
 </head> 
 <body> 
  <div class="animate"></div> &gt;  
 </body>
</html>

Related Tutorials