How to cancel the animation after turning off the mouse

Question

This is exactly what I want to achieve (the animation starts when I hang and relate after I have sagged). I just don’t want the animation to start until I move over the object. In the code, the animation begins immediately after the update.

.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> 

Answer 1

You can get rid of animations and simply add the transform and transition properties directly to the class as follows:

 .class { transform: rotate(0deg); transition: transform 2s; } .class:hover { transform: rotate(360deg); transition: transform 5s; } 

 <div style="width:100px; height:100px; background-color:red" class="class"></div>