css - 进度条动画仅适用于 IE10

Question

我碰巧发布了一个关于 outlook.com 提出的线性动画的问题，我们这里的一些 friend 告诉我这是不可能的。我能够通过 CSS3 关键帧实现这一点。但是，它似乎只能在 IE10 中使用，而不能在 Firefox 和 Chrome 中使用。我已经从 w3schools 为 firefox 和 chrome 放置了替代标签，但我仍然不确定为什么它不起作用。这是来自 jsfiddle 的链接，其中包含我的代码。我还放了 github 链接以防万一。请在这方面帮助我。

JSFiddle

Github

我的部分代码如下。此代码对每个 .(点)重复，但时间略有变化。有 5 个这样的点。

 .linearAnimate1
{
    animation-delay: 0s;
    -moz-animation-delay:0s; /* Firefox */
    -webkit-animation-delay:0s; /* Safari and Chrome */
    animation-duration: 10s;
    -moz-animation-duration:10s; /* Firefox */
    -webkit-animation-duration:10s; /* Safari and Chrome */
    animation-iteration-count: infinite;
    -moz-animation-iteration-count:infinite; /* Firefox */
    -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
    animation-name: makedotspin1;
    -moz-animation-name: makedotspin1;
    -webkit-animation-name: makedotspin1;

}

@keyframes makedotspin1 {
    from {
      animation-timing-function: ease;
      -moz-animation-timing-function:ease; /* Firefox */
      -webkit-animation-timing-function:ease; /* Safari and Chrome */
      transform: translateX(0px);
      -moz-transform: translateX(0px);
      -webkit-transform: translateX(0px);
      visibility:visible;
    }
    25% {
      animation-timing-function: ease-in;
      -moz-animation-timing-function:ease-in; /* Firefox */
      -webkit-animation-timing-function:ease-in; /* Safari and Chrome */
      transform: translateX(450px);
      -moz-transform: translateX(450px);
      -webkit-transform: translateX(450px);          
      animation-delay: 0.5s;
      -moz-animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;

    }
    50% {
      animation-timing-function: ease-inout;
      transform: translateX(900px);
      -moz-transform: translateX(900px);
      -webkit-transform: translateX(900px);
      visibility:hidden;
      animation-delay: 10s;
      -moz-animation-delay: 10s;
      -webkit-animation-delay: 10s;
    }
    to
    {
    }
}

Animated buttons metro style progress bar (展示它不能只使用 gif 来完成

Answer 1

我相信您需要为不同的布局引擎设置@keyframes 的前缀，例如:

@-webkit-关键帧{}@-moz-关键帧

等等，IE10 能用是因为它支持官方规范