Question

我告诉了我一个问题。当我使用-webkit-前缀（或另一个前缀）创建动画时，我只需要使用此前缀编写属性，或者我必须添加所有前缀。

e.g。

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

或

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

Answer 1

由于只有WebKit浏览器可以应用@-webkit-keyframes规则，所以在这些规则中包含任何其他前缀都没有任何意义。

您希望为@keyframes规则添加其他前缀，而不是其中的属性。内部属性使用匹配前缀：

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(0); }
    100% { -webkit-transform: scale(1); }
}

@-moz-keyframes bounce {
    0% { -moz-transform: scale(0); }
    100% { -moz-transform: scale(1); }
}

@-o-keyframes bounce {
    0% { -o-transform: scale(0); }
    100% { -o-transform: scale(1); }
}

@keyframes bounce {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

（没有@-ms-keyframes，没有必要在-ms-transform中使用@keyframes。）

动画需要哪些前缀？

1 个答案: