19

Is it possible to use Compass or SASS to output the following CSS transition that will output all the various vendor prefixes:

-webkit-transition: all 0.3s ease-in-out;

Can anyone point me to the correct library?

lorem monkey
  • 3,942
  • 3
  • 35
  • 49
dagda1
  • 26,856
  • 59
  • 237
  • 450

3 Answers3

53

Use compass' transition mixin:

@include transition(all 0.3s ease-in-out);
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • 1
    In addition to the transitions linked by Joseph, if you're looking for animations, Eric Meyer has a [Compass Animation plugin](https://github.com/ericam/compass-animate) which requires [Compass v0.13](http://beta.compass-style.org/CHANGELOG/) (currently alpha) – steveax Jan 13 '13 at 06:53
  • 1
    `@include transition(color 0.3s ease-in-out, background-color 0.3s ease-in-out);` if you want to target specific styles (which I believe is faster) – Tisch Sep 17 '15 at 12:30
6

Mixin for creating animations using single or "all" property transitions

@include transition(PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION)
@mixin transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
      -ms-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

Mixin for creating animations using multiple property transitions

@include multi-transition("PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION, PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION")
@mixin multi-transition($transition) {
 -webkit-transition: #{$transition};
    -moz-transition: #{$transition};
     -ms-transition: #{$transition};
      -o-transition: #{$transition};
         transition: #{$transition};
}
Mo.
  • 26,306
  • 36
  • 159
  • 225
0

SASS Mixin

@mixin transition($transition){
     -webkit-transition: $transition;
     -moz-transition: $transition;
     -o-transition: $transition;
     transition: $transition;
}

@include transition(all 0.3s ease-in-out);
Sony Mathew
  • 17
  • 2