Question

我碰巧在outlook.com上发布了一个关于线性动画的问题，我们的一些朋友告诉我，这是不可能的。我能够通过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-keyframes {} @ -moz-keyframes

等，IE10之所以有效，是因为它支持官方规范

Answer 2

最后我发现了这个问题。由于我使用了无序列表，因此我使用了以下CSS

 ul li
    {
        display: inline;       
        font-size:4em; 
        visibility:hidden;   
    }

但是，Mozilla和chrome无法进行动画处理，因为显示内联并且所有列表项都在彼此之上。为了解决这个问题，我必须做两件事1）我必须为关键帧添加-moz-和-webkit-前缀2）将显示更改为内联块，如下所示，它修复了问题。现在动画可以在Mozilla，IE和Chrome上运行

 ul li
    {
        display: inline-block;       
        font-size:4em; 
        visibility:hidden;   
    }

进度条动画仅在IE10中工作

2 个答案: