CSS 延续浏览器属性

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, etc?

Answer 1

这可以通过 css 预处理器或一些 gulp 或 grunt 任务轻松完成。如果这些术语对您来说是新的，我建议您查找 Google Web Starter Kit ,它很容易设置，它带有 css 预处理器 (SASS)、前缀器和其他有用的东西。