Question

我在网页中使用了很多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);
    }
}

Answer 1

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

所以一定是

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

或者您可以将animation-duration和animation-name合并到一个animation的css属性中，这样就可以

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

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

CSS3动画仅适用于Firefox

2 个答案: