CSS关键帧动画的所有浏览器？ [英] CSS Keyframe animations for all browsers?

问题描述

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

I have a swing animation that I would like to work on all (modern) browser. Do I have the correct css?

此外，其他浏览器是等效的：-webkit-transform-origin：top;

Also, what are the other browsers equivalent for: -webkit-transform-origin:top;

也是，有更容易的方法写出来，似乎很多代码？使用较少。

also, is there an easier way to write this out, seems like a lot of code? Im using less.

.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)}
}

推荐答案

可以使用：

.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中，关键帧很奇怪：
< a href =http://stackoverflow.com/questions/15974128/how-to-set-keyframes-name-in-less>如何在LESS中设置关键帧名称

for the keyframes in Less, it's kind of strange: How to set keyframes name in LESS

这篇关于CSS关键帧动画的所有浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！