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

Posted 2023-03-06

【中文标题】使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转

【英文标题】：CSS animation on hover stay at last keyframe when using transform: rotate

【发布时间】：2014-10-25 00:37:39

【问题描述】：

我试图让此动画在悬停时停留在其最后一个关键帧，但它会不断恢复到开头。我不介意如果我悬停它会恢复，但不会在悬停期间恢复。我查看了很多堆栈问题，每个人都说使用动画填充模式：转发，但这似乎不起作用。

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

【参考方案1】：

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

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

CSS Transforms Module Level 1

可变形元素是一种元素，其布局由块级或atomic inline-level element 的 CSS 盒模型控制，或者其显示属性计算为 table-row、table-row-group、table-header-组、表格页脚组、表格单元格或表格标题。

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