CSS 延续浏览器属性答案

【问题标题】：CSS continues browser attributesCSS 延续浏览器属性
【发布时间】：2014-12-14 09:19:19
【问题描述】：

目前有一种通用的方式来为 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等？

【问题讨论】：

使用一些 css 预处理器，例如 learnboost.github.io/stylus/docs/keyframes.html 检查 CSS 动画列表 developer.mozilla.org/en-US/docs/Web/CSS/animation
谢谢，但自动前缀是更好的解决方案

标签： css cross-browser css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：