Come invertire l'animazione al passaggio del mouse dopo il passaggio del mouse

Question

Questo è esattamente ciò che voglio ottenere (l'animazione inizia quando si passa il mouse e si rinnova dopo aver passato il mouse). Non voglio che l'animazione si avvii finché non passerò il mouse sopra l'oggetto. Nel codice l'animazione inizia subito dopo l'aggiornamento.

.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

Si può sbarazzarsi delle animazioni e basta aggiungere transform e transition proprietà direttamente sulla classe in questo modo:

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