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关键帧。如果它丢失，它将从默认值或已在关键帧外指定的值自动生成。

将CSS3浏览器兼容性标记合并为一个

1 个答案: