CSS3 动画仅适用于 Firefox答案

【问题标题】：CSS3 animations working only in FirefoxCSS3 动画仅适用于 Firefox
【发布时间】：2014-06-13 21:20:35
【问题描述】：

我在我的网页中使用了很多 CSS3 过渡和动画，但它们只在 Firefox 中有效，在我检查过的其他浏览器中无效，例如铬合金。我使用供应商前缀，但似乎没有什么区别。我还读到我必须在原始行之前有供应商前缀行，但这次尝试也没有给出任何成功的结果。下面是一个无效的动画示例：

html {
    -webkit-animation-name: fadeInLeftBig;
    -moz-animation-name: fadeInLeftBig;
    -o-animation-name: fadeInLeftBig;
    animation-duration:1s;
    animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -moz-transform: translateX(-2000px);
        -o-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -moz-transform: translateX(-2000px);
        -o-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

【问题讨论】：

标签： css animation cross-browser css-transitions css-animations

【解决方案1】：

实际上它可以工作，但动画的持续时间在其他浏览器上为 0 秒，因为您没有添加前缀 -webkit 以使用 chrome 和 Safari。

应该是这样的

html{
    .....
    animation-duration:1s;
    -webkit-animation-duration: 1s;
}

或者您可以将animation-duration 和animation-name 组合在一个css 属性中，即animation，这样就可以了

html{
    -webkit-animation: fadeInLeftBig 1s;
    animation: fadeInLeftBig 1s;
}

【讨论】：

【解决方案2】：

添加一个 -webkit 特定的关键帧

@keyframes fadeInLeftBig {

  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -moz-transform: translateX(-2000px);
    -o-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -moz-transform: translateX(-2000px);
    -o-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

【讨论】：

带有前缀-moz- 和-o- 的行在-webkit- 关键帧中是无用的。
webkit关键帧的顺序和原文有关系吗？
另外，我看不出您在此处添加的新内容是什么？它看起来和原来的帖子一样