CSS3 动画仅在 Firefox 中有效

Question

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

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);
    }
}

Answer 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;
}