Chrome以外的其他浏览器上的CSS动画填充模式？答案

【问题标题】：CSS animation-fill-mode on other browsers than Chrome?Chrome以外的其他浏览器上的CSS动画填充模式？
【发布时间】：2014-01-08 08:35:08
【问题描述】：

Chrome 的 webkit（据我所知）是唯一支持动画填充模式的。

(-webkit-animation-fill-mode: forwards)

在我的 site 上，当您在 Chrome 上加载页面时，动画效果很好。但是，由于它是一个移动网站，因此无法在 Chrome 之外运行是一个问题。

如果可能的话，我想要一个纯 CSS 解决方案。

【问题讨论】：

从 MDN 开始，所有现代浏览器都支持它。您是否还包括其他供应商前缀？见：developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode（还要留意顶部的黄色大框“这是一项实验性技术”）
我的网站是为移动设备设计的，与移动浏览器的兼容性未知... 2.3.4 Android Dolphin Browser 无法使用。
相关stackoverflow.com/questions/12598930/…（从答案看来可以用jQuery完成）

标签： javascript jquery css google-chrome webkit

【解决方案1】：

对于其他浏览器，您可以使用：

 -webkit-animation-fill-mode: forwards;  /* it works with Chrome */
    -moz-animation-fill-mode: forwards;  /* works with Mozilla Firefox */
     -ms-animation-fill-mode: forwards;  /* works with IE */
      -o-animation-fill-mode: forwards;  /* works with Opera */
         animation-fill-mode: forwards;  /* should work with all browser .... in theory */

您可以在此处找到有关前缀的更多详细信息：

http://www.w3schools.com/cssref/css3_browsersupport.asp

祝你有美好的一天

【讨论】：