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

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:转发;

它保留了最终的关键帧状态.

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规则设置为完成结果即可. 例