होवर स्टॉप एनीमेशन पर उनके संबंधित स्थिति

Question

मेरे पास दो divs हैं जिनमें एक स्माइली है जिसमें innercircle1 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

साथ ही आप jQuery का उपयोग कर सीएसएस के रूप में एनीमेशन रोक सकते हैं।

एनीमेशन-प्ले-स्टेट प्रॉपर्टी का उपयोग करने के लिए एक बहुत ही सरल समाधान। इन पंक्तियों का प्रयास करें:

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