Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS background-position Property Animation</title> <style> .animated { width: 300px; height: 175px; background: url("/examples/images/octopus.png") no-repeat left center #e4eacf; background-size: 25%; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {background-position: right center;} } /* Standard syntax */ @keyframes test { 50% {background-position: right center;} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p><strong>Note:</strong> The background image position of the following 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.<p> <div class="animated"></div> </body> </html>
