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，也没有必要用-ms-transformin @keyframes。）