Getting Compass to add vendor prefixes to animation selectors

问题

Can anyone tell me how I can get Compass to add the vendor prefixes to CSS3 animation selectors when it compiles? My config file looks like this.

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "img"
javascripts_dir = "js"

output_style = :expanded
relative_assets = true
line_comments = false

I've tried adding Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms") to it, but it doesn't work.

---

Edit

In response to cimmanon's comment, I wanted to avoid having to repeat every selector like this:

.big-wheel {
    left: 77px;
    bottom: 11px;
    -webkit-transform: rotate(0deg);
    -webkit-animation-name: wheels;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-iteration-count: infinite;
    -moz-transform: rotate(0deg);
    -moz-animation-name: wheels;
    -moz-animation-duration: 0.25s;
    -moz-animation-iteration-count: infinite;
    -ms-transform: rotate(0deg);
    -ms-animation-name: wheels;
    -ms-animation-duration: 0.25s;
    -ms-animation-iteration-count: infinite;
    transform: rotate(0deg);
    animation-name: wheels;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
}

回答1:

Compass does have a built in mixin for transform

I don't see mixins for the other items documented on the website. Compass makes it easy to write your own if you need to using the experimental mixin.

.foo {
    @include experimental('animation-name', wheels, webkit, moz, o, ms, not khtml);
    @include experimental('animation-duration', 0.25s, webkit, moz, o, ms, not khtml);
    // alternate way of setting prefixes
    $animation-support: webkit, moz, o, ms, not khtml;
    @include experimental('animation-iteration-count', infinite, $animation-support...);
}

Compiles to:

.foo {
  -webkit-animation-name: wheels;
  -moz-animation-name: wheels;
  -ms-animation-name: wheels;
  -o-animation-name: wheels;
  animation-name: wheels;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -ms-animation-duration: 0.25s;
  -o-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

回答2:

You could try a library like Bourbon. Then in your SCSS file you would only have to write a single include statement, and Bourbon would generate all the prefixes for you on export.

@include transform(translateY(50px));

来源：https://stackoverflow.com/questions/17618082/getting-compass-to-add-vendor-prefixes-to-animation-selectors