將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關鍵幀兩種。如果缺失，它將自動從默認值或已在關鍵幀外指定的值生成。