background-position - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:background-position

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

Introduction

The background image position of the DIV element is animating from its initial value "left center" to "right center", and back to the initial value "left center" again up to infinite times.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background-position Property Animation</title>
  <style type="text/css">
.animated {<!--  ww w  .j a v a  2 s. c o m-->
    width: 300px;
    height: 175px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat left center #e4eacf;
    background-size: 25%;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {background-position: right center;}
}

@keyframes test {
    50% {background-position: right center;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="animated"></div>
 </body>
</html>

Related Tutorials