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);
  }
}

questionAnswers(1)

yourAnswerToTheQuestion