animation clock wise and anticlock

by Kheema Pandey

HTML

<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png">
  
  <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png">

CSS

.leftwheel {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}


.rightwheel {
    -webkit-animation: rotation1 2s infinite linear;
    animation: rotation1 2s infinite linear;
  -moz-animation: rotation1 2s infinite linear;
}

@-webkit-keyframes rotation1 {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotation1 {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotation1 {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}