2016-06-27 32 views
5

Ho due div che ha un cerchio e uno smily dove in1 div è in rotazione con animazione data. quello che voglio è quando mi passa il mouse sulla innercircle1 div dovrebbe fermarsi, ma con la loro attuale posizione di trasformare origine, Attualmente quando il mouse sopra innercircle1 div si va al punto di partenza vale a dire la loro data di trasformare origine e stop.Animazione stop al passaggio del mouse nella rispettiva posizione

body { 
 
     background: #000; 
 
     color: #fff; 
 
    } 
 

 
    @keyframes circle { 
 
     from { 
 
      transform: rotate(0deg); 
 
     } 
 

 
     to { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 

 
    @keyframes inner-circle { 
 
     from { 
 
      transform: rotate(0deg); 
 
     } 
 

 
     to { 
 
      transform: rotate(-360deg); 
 
     } 
 
    } 
 

 
    .outercircle { 
 
     border: 1px solid red; 
 
     border-radius: 50%; 
 
     width: 310px; 
 
     margin: 64px auto; 
 
     height: 310px; 
 
     position: Relative; 
 
    } 
 

 
    .innercircle { 
 
     width: 100px; 
 
     height: 100px; 
 
     margin: 20px auto 0; 
 
     color: orange; 
 
     font-size: 100px; 
 
     line-height: 1; 
 
     animation: circle 5s linear infinite; 
 
     transform-origin: 50% 200px; 
 
     position: ABSOLUTE; 
 
     top: -70px; 
 
     left: 109px; 
 
    } 
 

 
    .innercircle1 { 
 
     animation: inner-circle 5s linear infinite; 
 
    }
<div class="outercircle"><div class="innercircle"><div class="innercircle1">☻</div></div></div>

risposta

4

È possibile mettere in pausa l'animazione utilizzando jQuery e CSS.

Una soluzione molto semplice per utilizzare la proprietà di animazione-play-state. Prova queste righe:

.innercircle1 { 
     animation: inner-circle 5s linear infinite; 
     animation-play-state: play; 
    } 
    .innercircle1:hover{ 
     animation-play-state: paused; 
    } 
+1

Grazie, ma mi puoi suggerire che come possiamo fare con Jquery? – WebStarter

+3

@WebStarter, guarda qui come puoi fare con JQuery: http://codepen.io/gabrieleromanato/pen/jEfbn –

Problemi correlati