0

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

JSFiddle

Github

我的部分代码如下。对每个 .(dot) 重复此代码，但时间略有变化。有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
    {
    }
}

动画按钮 Metro 风格进度条（显示它不仅可以使用 gif

4

2 回答 2

1

我相信您需要为不同的布局引擎添加 @keyframes 前缀，例如：

@-webkit-keyframes {} @-moz-keyframes

等，IE10 工作，因为它支持官方规范

于 2013-01-09T18:08:59.653 回答
0

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

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

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

 ul li
    {
        display: inline-block;       
        font-size:4em; 
        visibility:hidden;   
    }
于 2013-01-10T16:44:22.043 回答