CSS3 动画 : How to have the object not revert to its initial position after animation has run?

标签 css

<分区>

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

最佳答案

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

-webkit-animation-fill-mode: forwards;

保留最终关键帧状态。

更新:完整的跨浏览器

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

关于CSS3 动画 : How to have the object not revert to its initial position after animation has run?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6897724/

相关文章:

html - 在 div 中水平对齐 HTML 元素

javascript - Bootstrap typeahead.js 不会突出显示自动完成文本框中的元素

html - pagepiling.js 中特定部分的鼠标滚动问题

html - Bootstrap 下拉菜单在移动设备上消失

html - 选择标签中的最大宽度在 IE 中不起作用

html - border-radius 不适用于 div 的顶部

javascript - 为什么这个 jQuery 不起作用?图像淡入淡出

html - CSS 正确对齐 Div

html - 顶部的固定位置菜单和 anchor 链接下方的元素

javascript - 右元素在 float : left 后下移