css3 rotate transform

@-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes counterclockwise { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } .gear { text-align:center; width: 120px; height: 120px; border:none; -webkit-animation-name: clockwise; -webkit-animation-duration: 4s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function: linear; } .gear:hover { -webkit-animation-name: counterclockwise; }