CSS3 Animate：如何让对象在动画运行后不还原到其初始位置？ [英] CSS3 Animate: How to have the object not revert to its initial position after animation has run?

问题描述

我正在尝试一个简单的变换CSS中的形状（webkit具体）。
动画按预期运行，但完成后div将恢复到其初始状态。

I am attempting a simple transform on a shape in CSS (webkit specifically). The animation runs as expected but upon completion the div will revert to its initial state. Is there any way to have it remain in its final state?

到目前为止我的CSS：

Heres my CSS thus far:

    @-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;
}

推荐答案

将所有css规则设置为完成结果。
示例

Oh, that's easy, simply set all the css rules to the finishing result. Example

这篇关于CSS3 Animate：如何让对象在动画运行后不还原到其初始位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！