所有浏览器的 CSS 关键帧动画？答案

【问题标题】：CSS Keyframe animations for all browsers?所有浏览器的 CSS 关键帧动画？
【发布时间】：2013-12-12 00:33:03
【问题描述】：

我有一个摆动动画，我想在所有（现代）浏览器上工作。我有正确的 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)}
}

【问题讨论】：

标签： css less

【解决方案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 中的关键帧，这有点奇怪： How to set keyframes name in LESS

【讨论】：

【解决方案2】：

我有一个摆动动画，我想在所有（现代）浏览器上工作。我有正确的 css 吗？

这个问题不适合所以......只需准备一个 Fiddle，自己尝试一下，如果它不起作用，回来问为什么它不起作用。不要发布代码询问它是否有效。

另外，其他浏览器等效于：-webkit-transform-origin:top;

transform-origin
-ms-transform-origin

另外，有没有更简单的方法可以写出来，看起来代码很多？我用的少。

您可以使用Prefix Free 即时生成前缀代码，或者在编译时使用Prefixr 生成前缀代码，但由于您使用的是LESS，请查看LESS Prefixer。

【讨论】：