css - 动画需要哪些前缀？

Question

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

例如

@-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，也没有必要在@keyframes中使用-ms-transform。)