Question

目前有一种将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等？

Answer 1

这很容易通过css预处理器或一些gulp或grunt任务来完成。如果这些条款对您来说是新的，我建议您查看Google Web Starter Kit，它很容易设置，它带有一个css预处理器（SASS），前缀和其他有用的东西。

Answer 2

不，即使在CSS3中，也不可能进行这样的连续语句并最小化文件大小。

自动执行此过程的最佳工具是Autoprefixer。

CSS继续浏览器属性

2 个答案: