Animation How to - Spin image Animation

Question

We would like to know how to spin image Animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes spinnerRotate {<!--  w  ww  . j  a  v  a2s .  c  om-->
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinnerRotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes spinnerRotate {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}
#spin {
    position: fixed;
    top: 2%;
    left: 0%;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}
</style>
</head>
<body>
  <div id="spin">
    <img
      src="http://www.java2s.com/style/download.png" />
  </div>
</body>
</html>

The code above is rendered as follows: