所有瀏覽器的CSS關鍵幀動畫？

Question

我有一個搖擺動畫，我想在所有（現代）瀏覽器上工作。 我有正確的CSS嗎？

此外，其他瀏覽器相當於：-webkit-transform-origin：top;

還有，有沒有更簡單的方法來寫出來，似乎很多代碼？ 我少用。

.bow{   
    -webkit-animation: swing 3s infinite ease-in-out;
    -moz-animation:    swing 3s infinite ease-in-out;
    -o-animation:      swing 3s infinite ease-in-out;
    -ms-transition:    swing 3s infinite ease-in-out; 
    animation:         swing 3s infinite ease-in-out;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}

@-o-keyframes swing {
    0%{-o-transform:rotate(-3deg)}
    50%{-o-transform:rotate(3deg)}
    100%{-o-transform:rotate(-3deg)}
}

@-ms-keyframes swing {
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}

@keyframes swing {
    0%{transform:rotate(-3deg)}
    50%{transform:rotate(3deg)}
    100%{transform:rotate(-3deg)}
}

Answer 1

動畫使用可以使用：

.animation(@value){
    -webkit-animation: @value;
    -moz-animation:    @value;
    -o-animation:      @value;
    -ms-transition:    @value;
    animation:         @value;
}

.test{
  .animation(swing 3s infinite ease-in-out);
}

.test1{
  .animation(~"swing 3s infinite, swing 3s infinite");
}

對於Less中的關鍵幀，有點奇怪： 如何在LESS中設置關鍵幀名稱

Answer 2

我有一個搖擺動畫，我想在所有（現代）瀏覽器上工作。 我有正確的CSS嗎？

這個問題不合適......只是准備一個小提琴，自己嘗試，如果它不起作用，回來問為什么它不起作用。 不要發布代碼詢問它是否有效。

此外，其他瀏覽器相當於： -webkit-transform-origin:top ;

• transform-origin
• -ms-transform-origin

還有，有沒有更簡單的方法來寫出來，似乎很多代碼？ 我少用。

您可以使用Prefix Free在運行時生成帶前綴的代碼，或者在編譯時使用Prefixr生成前綴代碼，但由於您使用的是LESS，請查看LESS Prefixer 。