How can I spin two different images in different directions?

Question

I am trying to endlessly rotate two images of gears in different directions - one clockwise and the other anti clockwise. I have found the css3 below but it only animates them in the same direction. What is the best way to accomplish this? Is it even through css3 or perhaps with query? (Taking cross-browser compatibility into account)

  #image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
 #image2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    }


 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);

Answer 1

will need another, say called antispin, with a setting of -360deg ( minus ) :

 @-moz-keyframes antispin { 100% { -moz-transform: rotate(-360deg); } }