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

Question

我正在尝试使该动画在悬停时停留在其最后一个关键帧中，但它会一直恢复到开始时的状态。我不在乎是否将鼠标悬停在它的上方，但不在悬停期间。我浏览了很多堆栈问题，每个人都说要使用animation-fill-mode：转发，但这似乎行不通。

这是我的代码和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。请参阅此相关问题。

在这种特定情况下，以下内容是相关的：

CSS转换模块级别1

可变换元素是其布局由CSS框模型控制的元素，该CSS框模型可以是块级或原子内联级元素，或者其显示属性可以计算为table-row，table-row-group，table-header-group ，表格页脚组，表格单元格或表格标题。

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

您还应该使用动画速记。另外，添加其他供应商前缀：

在此更新示例

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