如何在前缀(关键帧)中添加前缀(转换)?
如果我使用@keyframes来执行转换动画,我将如何布置我的前缀?如何在前缀(关键帧)中添加前缀(转换)?
,如果我有以下几点:
@keyframes animation {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
不那么我需要我所有的变换前缀添加到每个关键帧申报? EG:
@keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
这是行不通的吗?如果这是做到这一点的最好方式,还是有速记/快捷方式?我会想象这种方式很快就会变得笨重和可怕,即使是非常复杂的动画。
一般而言,前缀在CSS动画和转换方面尤其混乱。我有一个全面的指导来管理这两个功能的前缀,你可以找到here。
你肯定什么工作,但它是不必要的:
-
浏览器IE以外不会反正承认
-ms-transform
声明,支持CSS动画开箱即用的也是IE的版本支持前缀为transform
。这意味着根本不需要
-ms-transform
。你应该删除它的所有实例。你只需要在CSS动画以外的地方使用变形在IE9中静态工作。有关详情,请参阅上面的链接。 动画和转换只是在最近才在WebKit中没有前缀。然而,支持
@keyframes
前缀的WebKit版本也支持转换前缀。您可以从@keyframes
规则中删除-webkit-transform
声明。我不会碰这两条规则中前缀无前缀的
transform
声明。转换的前缀比动画稍早,所以一些需要@-webkit-keyframes
的WebKit版本确实支持前缀转换。
此外,前缀无规则应该最后。这适用于属性(如transform
)和规则(如@keyframes
)。这里是您的CSS与上述优化:
@-webkit-keyframes animation {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes animation {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
非常感谢;这已回答了我的问题,并清除了我可能有的任何其他疑问! –
许多开发人员使用Javascript或预处理器插件来做到这一点。查看[** PrefixFree **](http://leaverou.github.io/prefixfree/)或[** Autoprefixer **](https://github.com/postcss/autoprefixer)...还有其他。 –