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

Answer 2

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

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

此外，其他浏览器相当于：-webkit-transform-origin:top;

transform-origin
-ms-transform-origin

另外，有没有更简单的方法来写出来，似乎很多代码？我少用。

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

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

2 个答案: