それぞれの位置でホバー停止アニメーションをオンにします

Question

私はのinnercircle1 divが指定されたアニメーションで回転しているところに1つの円と1つのスミライを持つ2つのdivを持っています。私はそれを停止すべきinnercircle1 divの上ではなく、現在の変換の原点位置に置くと は何私が欲しいのは、私が innercircle1 以上のdivを置くと 現在、それはすなわち、自分の与えられた起源を変換し、停止し、その出発点になり、です。

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

あなたはCSSと同様にjQueryを使ってアニメーションを一時停止することができます。

アニメーション再生状態のプロパティを使用する非常に簡単なソリューションです。 これらの行試してみてください。

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