使用变换时，悬停时的CSS动画停留在最后一个关键帧处：rotate

Question

我试图让此动画保留在悬停的最后一个关键帧上，但它始终回复到开头。我不介意我是否将鼠标悬停在其上，但不在悬停过程中。我浏览了很多堆栈问题，每个人都说要使用动画填充模式：转发，但这似乎不起作用。

这里是我的代码和一个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); 
    } 
} 

Answer 1

对于那些有类似问题的链接，首先要确保您使用的animation-fill-mode: forwards。见this related question。

在此特定情况下，下面是相关的：

CSS Transforms Module Level 1

一种可变形元件是元件，其布局由CSS盒模型，其可以是一个块级或atomic inline-level element管辖，或者其显示属性计算为表格行，表格行组，表格标题组，表格标题组，表格标题组或表格标题。

由于.circle元件是span，它是inline默认，因此该属性transform: rotate()将不具有动画结束之后在其上的作用。将其display更改为inline-block或block将解决该问题。

您还应该使用animation shorthand。此外，加入其他供应商前缀：

Updated Example Here

.circle:hover .spin { 
    display:inline-block; 
    -webkit-animation: drop 1s 1 alternate ease-out forwards; 
    -moz-animation: drop 1s 1 alternate ease-out forwards; 
    animation: drop 1s 1 alternate ease-out forwards; 
}