HTML CSS examples for CSS Animation:Transform
HTML5 Transition and Transform effect.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- w w w . ja v a 2 s . co m--> font-size:201%; padding:2em; margin:2em; width:5em; border:2px solid Chartreuse; -moz-animation-duration:2s; -webkit-animation-duration:2s; } div:hover { -moz-animation-name:myAnimation; -webkit-animation-name:myAnimation; -moz-transform:rotate(181deg) scale(2); -webkit-transform:rotate(181deg) scale(2); } @-moz-keyframes myAnimation { from { -moz-transform:rotate(0deg) scale(2); } 50% { -moz-transform:rotate(91deg) scale(0.9); } to { -moz-transform:rotate(181deg) scale(2); } } @-webkit-keyframes myAnimation { from { -webkit-transform:rotate(0deg) scale(2); } 50% { -webkit-transform:rotate(91deg) scale(0.9); } to { -webkit-transform:rotate(181deg) scale(2); } } </style> </head> <body> <div> Lorem ipsum </div> </body> </html>