Make this background image a smooth 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

Make this background image a smooth animation

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">

.poster<!--from www  . j  av a 2s  .  co m-->
{
   width: 178px;
   height: 257px;
   background-color: #212121;
   background-size: 90px 90px;
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
   -webkit-animation: backgroundmove infinite 3s linear;
}
@-webkit-keyframes backgroundmove {
   from {
      background-position: left;
   }
   to {
      background-position: right;
   }
}


      </style> 
 </head> 
 <body> 
  <div class="poster"></div>  
 </body>
</html>

Related Tutorials