HTML CSS examples for CSS Animation:Rotate
CSS animation with time interval to rotate
<html> <head> <style> @-webkit-keyframes rotation {<!-- w w w. j a v a 2 s.c o m--> 0%, 40% {-webkit-transform: rotate(0deg);} 60%, 100% {-webkit-transform: rotate(90deg);} } @keyframes rotation { 0%, 40% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } } .wrapper { position: relative; } .wrapper a:first-child div{ position: absolute; width:25px; height:25px; top: 13px; left: 13px; background: red; z-index: 100; } .wrapper a:last-child div { width:50px; height:50px; position: relative; background: orange; -webkit-animation: rotation 6s infinite linear; animation: rotation 6s infinite linear; } </style> </head> <body> <div class="wrapper"> <a href="#"> <div></div> </a> <a href="#"> <div></div> </a> </div> </body> </html>