CodeLab
Tutorials For Everyone
Run
<!DOCTYPE html> <html> <head> <style> #image { width: 300px; height: 200px; background: yellow url('https://www.tutsinsider.com/images/Tuts-Insider-Logo.png'); background-position: top left; background-size: 20px; animation: anim 5s infinite; box-shadow: 0 0 10px 0 #ddd; margin: auto; } @keyframes anim { 50% {background-position: bottom right;} } </style> </head> <body> <h1>Animatable 'background-position' Property</h1> <hr> <p>Experience the changing position of the background image.<p> <div id="image"></div> </body> </html>