Wie man die Animation beim Verlassen der Maus nach dem Hover rückgängig macht

Question

Das ist genau das, was ich erreichen möchte (die Animation startet, wenn ich den Mauszeiger bewege, nachdem ich schweben). Ich möchte einfach nicht, dass die Animation startet, bis ich über dem Objekt schwebe. Im Code startet die Animation direkt nach dem Auffrischen.

.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

Sie können die Animationen loswerden und fügen Sie einfach transform und transition Eigenschaften direkt auf die Klasse wie folgt:

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