CSS3 Examples
10. CSS3 Animation example 1.<!DOCTYPE html> <html> <head> <title>Untitled Document</title> <style> @keyframes anim1{ from{ background-color:#0CF; left:200px; transform:rotate(0deg);} to { background-color:#F0F; left:500px; transform:rotate(360deg);} } @-webkit-keyframes anim1{ from{ background-color:#0CF; left:200px; -webkit-transform:rotate(0deg);} to { background-color:#F0F; left:800px; -webkit-transform:rotate(360deg);} } #box{ width:100px; height:100px; font-size:26px; background-color:#0CF; border-radius:5px; box-shadow:10px 10px 2px #999999; text-align:center; padding-top:20px; position:relative; top:30px; left:100px; } #box:hover{ animation:anim1 5s; -webkit-animation:anim1 5s; } </style> </head> <body> <div id="box"> <img src="images/anjelina.jpg" width="100"> </div> </body> </html>Output :(Mouse over the image)
Developed by