HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 200px; height: 300px; object-fit: cover; object-position: 0% 0%; animation: myAnimation 5s infinite; -webkit-animation: myAnimation 5s infinite; /* Safari 4.0 - 8.0 */ } @keyframes myAnimation { 0% {object-position: 0% 0%;} 25% {object-position: 25% 25%;} 50% {object-position: 50% 50%;} 75% {object-position: 75% 75%;} 100% {object-position: 100% 100%;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes myAnimation { 0% {object-position: 0% 0%;} 25% {object-position: 25% 25%;} 50% {object-position: 50% 50%;} 75% {object-position: 75% 75%;} 100% {object-position: 100% 100%;} } </style> </head> <body> <h1>CSS Animatable object-position</h1> <img src="devices.jpg"> </body> </html>
OUTPUT
×

Save as Private