动画需要哪些前缀？

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。）