Zmiana prędkości animacji po najechaniu myszką

Question

Buduję system planet, w którym można umieścić wskaźnik myszy na orbicie, a prędkość animacji zmienia się na.
Próbowałem go z jquery onMouseOver i .hover, ale nie mogłem zrozumieć, dlaczego to nie działa.

#universum-planet1 { 
 
    position: absolute; 
 
    height: 250px; 
 
    width: 250px; 
 
    top: 40%; 
 
    left: 50%; 
 
    margin-left: -125px; 
 
    margin-top: -65px; 
 
    z-index: 1; 
 
    border: 1px solid #989898; 
 
    -webkit-border-radius: 225px; 
 
    -moz-border-radius: 225px; 
 
    border-radius: 225px; 
 
    -webkit-animation: spin 15s linear infinite; 
 
    -moz-animation: spin 15s linear infinite; 
 
    animation: spin 15s linear infinite; 
 
    -moz-transform-origin: center center; 
 
    -webkit-transform-origin: center center; 
 
    transform-origin: center center; 
 
} 
 
#planet1 { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    height: 50px; 
 
    width: 50px; 
 
    z-index: 2; 
 
    -webkit-animation: spin 30s linear infinite; 
 
    -moz-animation: spin 30s linear infinite; 
 
    animation: spin 30s linear infinite; 
 
    -moz-transform-origin: center center; 
 
    -webkit-transform-origin: center center; 
 
    transform-origin: center center; 
 
} 
 
@-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); 
 
    } 
 
}

<div id="universum-planet1"> 
 
    <div id="planet1"> 
 
    <a href="universe.html" id="enterLink"> 
 
     <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouseOver="this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" 
 
     /> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

Ten roztwór używa się opakowanie do orbity do tego samego animacji kluczowej (wstecz), który powoduje zatrzymanie/biegnie zmiany prędkości animacji na aktywowaniu:

DEMO

.wrapper{ 
 
    position:absolute; 
 
    top:40%; left:50%; 
 
    margin-left:-125px; 
 
    margin-top:-65px; 
 
    width: 250px; height:250px; 
 

 
    -webkit-animation:spin 20s linear infinite; 
 
    -moz-animation:spin 20s linear infinite; 
 
    animation:spin 20s linear infinite; 
 

 
    -webkit-animation-direction: reverse; 
 
    -moz-animation-direction: reverse; 
 
    animation-direction: reverse; 
 

 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
#universum-planet1 { 
 
    height:250px; width: 250px; 
 
    z-index:1; 
 
    border: 1px solid #989898; 
 
    border-radius: 225px; 
 
    -webkit-animation:spin 15s linear infinite; 
 
    -moz-animation:spin 15s linear infinite; 
 
    animation:spin 15s linear infinite; 
 
    -moz-transform-origin:center center; 
 
    -webkit-transform-origin:center center; 
 
    transform-origin:center center; 
 
} 
 
#planet1 { 
 
    position:absolute; 
 
    top:5%; left:5%; 
 
    height: 50px; width: 50px; 
 
    z-index:2; 
 
    -webkit-animation:spin 30s linear infinite; 
 
    -moz-animation:spin 30s linear infinite; 
 
    animation:spin 30s linear infinite; 
 
    -moz-transform-origin:center center; 
 
    -webkit-transform-origin:center center; 
 
    transform-origin:center center; 
 
} 
 
.wrapper:hover{ 
 
    -webkit-animation-play-state: running; 
 
    -moz-animation-play-state: running; 
 
    animation-play-state: running; 
 
} 
 

 
@-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); } }

<div class="wrapper"> 
 
    <div id="universum-planet1"> 
 
    <div id="planet1"> <a href="universe.html" id="enterLink"> 
 
     <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouseOver= "this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /></a> 
 
    </div> 
 
    </div> 
 
</div>

Zostało inpired przez this answer przez Vals