<!DOCTYPE html> <html> <head> <title>CSS3 Animations</title> </head> <body> <style type="text/css"> .box_animation { margin: 50px; width:200px; height:150px; background:url(images/m_b_2.jpg) no-repeat; position: relative; /* Chrome, Safari, Opera */ -webkit-animation: repeatit 2s linear 0s infinite alternate; /* Standard syntax */ animation: repeatit 2s linear 0s infinite alternate; } /* Chrome, Safari, Opera */ @-webkit-keyframes repeatit { from {left: 0;} to {left: 50%;} } /* Standard syntax */ @keyframes repeatit { from {left: 0;} to {left: 50%;} } </style> <div class="box_animation"></div> </body> </html>
Output :
Topic :
Animations
