5
के बाद माउस पर एनीमेशन को रिवर्स कैसे करें यह वही है जो मैं प्राप्त करना चाहता हूं (एनीमेशन तब शुरू होता है जब मैं होवर करता हूं और जब मैं होवर करता हूं)। मैं सिर्फ एनीमेशन शुरू नहीं करना चाहता जब तक कि मैं ऑब्जेक्ट पर होवर नहीं करता। कोड में एनीमेशन रीफ्रेशिंग के बाद सही शुरू होता है।होवर
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}<div style="width:100px; height:100px; background-color:red" class="class"></div>