Na animacji zatrzymania zatrzymania w ich odpowiedniej pozycji

Question

Mam dwa elementy div, które mają jedno kółko wraz z jednym smily, gdzie innercircle1 div obraca się z daną animacją. co chcę, kiedy najechaniu na innercircle1 div powinien go zatrzymać, ale ze swojej obecnej pozycji przekształcenia pochodzenia, Obecnie kiedy Najedź innercircle1 div idzie do punktu wyjścia czyli ich pochodzenie i przekształcić dany przystanek.

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>

Answer 1

można wstrzymać animację przy użyciu jQuery, jak i CSS.

Bardzo proste rozwiązanie do korzystania z właściwości animacji-odtwarzania-stanu. Spróbuj linie:

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