目前常见的CSS动画浏览器属性的写法是:
@-webkit-keyframes wheel-keyframes {
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
@keyframes wheel-keyframes {
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
} //etc
代码重复是巨大的。可以这样做吗?
@-webkit-keyframes, @keyframes wheel-keyframes {
100% {
-ms-transform, -webkit-transform, transform: rotate(360deg);
}
}
是否有测试 CSS 属性列表的好资源,例如-webkit-animation-timing-function, animation-timing-function, etc?
最佳答案
这可以通过 css 预处理器或一些 gulp 或 grunt 任务轻松完成。 如果这些术语对您来说是新的,我建议您查找 Google Web Starter Kit , 它很容易设置,它带有 css 预处理器 (SASS)、前缀器 和其他有用的东西。
关于CSS 延续浏览器属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26447912/