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，或者其显示属性计算为表行，表行组，表格 - header-group，table-footer-group，table-cell或table-caption。

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

使用transform：rotate时，悬停时的CSS动画会保留在最后一个关键帧上

1 个答案: