CSS3 Animate：动画运行后如何使对象不还原为其初始位置？ [重复]

Question

此问题已经在这里有了答案：

Maintaining the final state at end of a CSS3 animation（4个答案）

[<6个月前关闭。

我正在尝试在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;
}

Answer 1

哦，很简单，只需将所有CSS规则设置为最终结果即可。Example

Answer 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;

Answer 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;

由于某些原因，上面的Madara Uchiha所做的评论并非总是可能的：想象一下，而不是立即开始动画（animation-delay：0s），您需要10秒钟的延迟才能开始。如果是这样，您将看到动画元素的最终状态10秒钟，然后动画将其从de 0关键帧过渡到100关键帧，但始终会看到10秒钟的结束状态。