CSS3 Animate：动画运行后如何让对象不恢复到其初始位置？ [复制]答案

【问题标题】：CSS3 Animate: How to have the object not revert to its initial position after animation has run? [duplicate]CSS3 Animate：动画运行后如何让对象不恢复到其初始位置？ [复制]
【发布时间】：2011-10-17 09:13:20
【问题描述】：

我正在尝试对 CSS（特别是 webkit）中的形状进行简单的转换。动画按预期运行，但完成后 div 将恢复到其初始状态。有什么办法让它保持最终状态？

到目前为止，这是我的 CSS：

    @-webkit-keyframes rotate-good {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate-bad {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(90deg);
  }
}

#good-arrow 
{
    -webkit-animation-name:             rotate-good; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
}

#bad-arrow 
{
    -webkit-animation-name:             rotate-bad; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;    
    -webkit-animation-delay: 2s;
}

【问题讨论】：

这是一个比另一个问题更老的问题
Working Example
哟，根据下面 Javi 的评论，您能否将接受标记从我的回答更改为迈克尔的回答？确实比我的更正确。

标签： css

【解决方案1】：

哦，这很简单，只需将所有 css 规则设置为整理结果即可。 Example

【讨论】：

你是对的 - 这很简单！
@Truth 你在css rules to the finishing result 下是什么意思？是ease-in-out 属性吗？无法正常工作。这是我的示例：jsfiddle.net/s2Fhf/16
@sergionni 我的意思是，如果您将left 动画化为50px，则将该元素的默认样式设置为50px，这样它就会停止并在50px 上持续存在。
恕我直言 -> 请添加代码和解释，在此之前不应将其视为已接受的答案
如果有animation-delay，这将不起作用。最佳答案如下（动画填充模式：转发；）

【解决方案2】：

一个更简单的方法是添加：

-webkit-animation-fill-mode: 转发；

保留最终关键帧状态。

更新：完全跨浏览器

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

【讨论】：

这对我来说是最好的答案，但 Visual Code 建议您使用 animation-fill-mode: forwards 以实现 chrome 兼容性
为什么这不是解决方案？不仅是最好的，而且官方的解决方案如果有animation-delay是不行的

【解决方案3】：

跨浏览器解决方案是：

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

上面的宇智波斑并非总是可行的，原因有一个：想象一下，不是立即开始动画 (animation-delay:0s)，而是在它开始前延迟 10 秒。如果是这样，您会在 10 秒内看到动画元素的最终状态，然后动画会将其从 0 关键帧转换为 100 关键帧，但您始终会看到 10 秒的结束状态。

【讨论】：