我试图让此动画保留在悬停的最后一个关键帧上,但它始终回复到开头。我不介意我是否将鼠标悬停在其上,但不在悬停过程中。我浏览了很多堆栈问题,每个人都说要使用动画填充模式:转发,但这似乎不起作用。使用变换时,悬停时的CSS动画停留在最后一个关键帧处:rotate
这里是我的代码和一个jsfiddle
.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);
}
}