A animação CSS ao passar o mouse permanece no último quadro-chave ao usar transform: rotate
Estou tentando fazer com que essa animação permaneça em seu último quadro-chave em foco, mas ela continua voltando ao início. Eu não me importo se eu pairar fora, ele reverte, mas não durante o pairar. Examinei muitas perguntas sobre pilhas e todos disseram usar o modo de preenchimento de animação: encaminha, mas isso não parece funcionar.
Aqui está o meu código e um link para umjsfiddle
.circle:hover .spin {
-webkit-animation-name: drop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes drop {
100% {
-webkit-transform: rotate(90deg);
}
}