.animate { 
    -webkit-animation: barrelRoll 10s linear 0s 1 normal forwards paused;
       -moz-animation: barrelRoll 10s linear 0s 1 normal forwards paused;
        -ms-animation: barrelRoll 10s linear 0s 1 normal forwards paused;
         -o-animation: barrelRoll 10s linear 0s 1 normal forwards paused;
            animation: barrelRoll 10s linear 0s 1 normal forwards paused;
}
.animate.invert {
    -webkit-animation-name: invertbarrelRoll;
       -moz-animation-name: invertbarrelRoll;
        -ms-animation-name: invertbarrelRoll;
         -o-animation-name: invertbarrelRoll;
            animation-name: invertbarrelRoll;
}

#animation_001:hover > .animate,
#animation_002:hover > .animate,
#animation_003:hover > .animate,
#animation_004:hover > .animate{
    -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
        -ms-animation-play-state: running;
         -o-animation-play-state: running;
            animation-play-state: running;
}

/* *** Berechnung iteration-count Sekundärrad ***
    
    z1 = Anz. Zähne Hauptrad
    z2 = Anz. Zähne Sekundärrad
    d1 = Duration Hauptrad

    iteration-count = z1 / z2
   
   *** Berechnung duration Sekundärrad ***

    duration = d1 / (z1 / z2)
*/

#gear_001,
#gear_202 { 
    -webkit-animation-duration: 8.88888888888889s; 
       -moz-animation-duration: 8.88888888888889s; 
        -ms-animation-duration: 8.88888888888889s; 
         -o-animation-duration: 8.88888888888889s; 
            animation-duration: 8.88888888888889s; 
    -webkit-animation-iteration-count: 1.125; 
       -moz-animation-iteration-count: 1.125; 
        -ms-animation-iteration-count: 1.125; 
         -o-animation-iteration-count: 1.125; 
            animation-iteration-count: 1.125; 
}
#gear_002,
#gear_101,
#gear_201,
#gear_301 { 
    -webkit-animation-duration: 4.44444444444444s; 
       -moz-animation-duration: 4.44444444444444s; 
        -ms-animation-duration: 4.44444444444444s; 
         -o-animation-duration: 4.44444444444444s; 
            animation-duration: 4.44444444444444s; 
    -webkit-animation-iteration-count: 2.25; 
       -moz-animation-iteration-count: 2.25; 
        -ms-animation-iteration-count: 2.25; 
         -o-animation-iteration-count: 2.25; 
            animation-iteration-count: 2.25; 
}
#gear_003,
#gear_203 { 
    -webkit-animation-duration: 6.66666666666667s; 
       -moz-animation-duration: 6.66666666666667s; 
        -ms-animation-duration: 6.66666666666667s; 
         -o-animation-duration: 6.66666666666667s; 
            animation-duration: 6.66666666666667s; 
    -webkit-animation-iteration-count: 1.5; 
       -moz-animation-iteration-count: 1.5; 
        -ms-animation-iteration-count: 1.5; 
         -o-animation-iteration-count: 1.5; 
            animation-iteration-count: 1.5; 
}
#gear_102 { 
    -webkit-animation-duration: 16.66666666666667s; 
       -moz-animation-duration: 16.66666666666667s; 
        -ms-animation-duration: 16.66666666666667s; 
         -o-animation-duration: 16.66666666666667s; 
            animation-duration: 16.66666666666667s; 
    -webkit-animation-iteration-count: 0.6; 
       -moz-animation-iteration-count: 0.6; 
        -ms-animation-iteration-count: 0.6; 
         -o-animation-iteration-count: 0.6; 
            animation-iteration-count: 0.6; 
}
#gear_302 { 
    -webkit-animation-duration: 13.33333333333333s; 
       -moz-animation-duration: 13.33333333333333s; 
        -ms-animation-duration: 13.33333333333333s; 
         -o-animation-duration: 13.33333333333333s; 
            animation-duration: 13.33333333333333s; 
    -webkit-animation-iteration-count: 0.75; 
       -moz-animation-iteration-count: 0.75; 
        -ms-animation-iteration-count: 0.75; 
         -o-animation-iteration-count: 0.75; 
            animation-iteration-count: 0.75; 
}



/*  *********** ANIMATIONS *********** */

@-webkit-keyframes barrelRoll {
    0% { 
        -webkit-transform: rotate(0deg); 
           -moz-transform: rotate(0deg); 
            -ms-transform: rotate(0deg); 
             -o-transform: rotate(0deg); 
                transform: rotate(0deg); 
    }
    100% { 
        -webkit-transform: rotate(360deg); 
           -moz-transform: rotate(360deg); 
            -ms-transform: rotate(360deg); 
             -o-transform: rotate(360deg); 
                transform: rotate(360deg); 
    }
}

@-webkit-keyframes invertbarrelRoll {
    0% { 
        -webkit-transform: rotate(0deg); 
           -moz-transform: rotate(0deg); 
            -ms-transform: rotate(0deg); 
             -o-transform: rotate(0deg); 
                transform: rotate(0deg); 
    }
    100% { 
        -webkit-transform: rotate(-360deg); 
           -moz-transform: rotate(-360deg); 
            -ms-transform: rotate(-360deg); 
             -o-transform: rotate(-360deg); 
                transform: rotate(-360deg); 
    }
}