Animation How to - Create rotation animation

Question

We would like to know how to create rotation animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes rotate { <!--  ww w.j  a v a  2  s.  c om-->
100%{-webkit-transform: rotate(360deg);
  transform: rotate(360deg);}
}
@-moz-keyframes rotate { 100%{
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);}
}
@keyframes rotate { 
100%{transform: rotate(360deg);}
}
.animation {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  transform-origin: center center;
}
</style>
</head>
<body>
  <p> css transform <img class="animation"
      src="http://www.java2s.com/style/download.png"
      alt="css transform" />
  </p>
</body>
</html>

The code above is rendered as follows: