css - 将 CSS3 浏览器兼容性标签合并为一个

Question

是否可以将所有浏览器兼容的标签(如 -webkit、-moz、-ms、-o)组合成一种样式？例如:

@-webkit-keyframes pulsate,
   @-moz-keyframes pulsate,
    @-ms-keyframes pulsate,
     @-o-keyframes pulsate,
         keyframes pulsate {
 from {opacity: 1 }
 to { -webkit-transform: scale(1.5); 
         -moz-transform: scale(1.5);
          -ms-transform: scale(1.5);
           -o-transform: scale(1.5);
              transform: scale(1.5);
      opacity: 0 }
}

如果不是。有没有相关的文档可以阅读？

Answer 1

不，这不可能。但是，您可以只编写无前缀的版本，然后使用类似 -prefix-free 的内容。或 Autoprefixer为您添加前缀。或者您可以使用预处理器。您可以阅读更多关于您的选择的信息 in this article .

如果您确实想手写所有内容，好消息是您不需要为动画添加 -ms- 前缀。 IE10 不加前缀地支持它们，而 IE9 根本不支持它们。所以你只需要这样写:

@-webkit-keyframes { to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } }
@-moz-keyframes { to { -moz-transform: scale(1.5); opacity: 0; } }
@-o-keyframes { to { -o-transform: scale(1.5); opacity: 0; } }
@keyframes { to { transform: scale(1.5); opacity: 0; } }

您也不一定需要 from 关键帧。如果它丢失，它会自动从默认值或那些已经在关键帧外指定的值生成。