Question

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

更简单的方法是添加：

-webkit-animation-fill-mode：forwards;

保留最终的关键帧状态。

Answer 2

跨浏览器解决方案是：

-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并不总是有可能出于一个原因：想象一下，而不是立即开始动画（动画延迟：0s），你想要在它开始前延迟10秒。如果是这样，您将看到动画元素的最终状态持续10秒，然后动画将它从de 0关键帧转换为100关键帧转换，但总是看到10秒结束状态。

Answer 3

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

CSS3 Animate：动画运行后如何让对象不恢复到初始位置？

3 个答案: