CSS Keyframe animations for all browsers?

问题

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

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

回答1:

for animation use can use:

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

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

回答2:

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

This question does not fit SO... just prepare a Fiddle, try it yourself, and IF it does not work, come back asking WHY it does not work. Don't post code asking IF it works.

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

transform-origin
-ms-transform-origin

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

You can generate prefixed code on-the-fly with Prefix Free, or at compile time with Prefixr, but since you are using LESS, take a look at LESS Prefixer.

来源：https://stackoverflow.com/questions/20518670/css-keyframe-animations-for-all-browsers

标签

css

css3

less