CODEWITHSUNDEEP
sasscompass-sass
dagda1
dagda1

Reputation: 28810

SASS/Compass Transitions

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?

Upvotes: 19

Views: 30035

Answers (3)

Sony Mathew
Sony Mathew

Reputation: 17

SASS Mixin

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

@include transition(all 0.3s ease-in-out);

Upvotes: 0

Mo.
Mo.

Reputation: 27465

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

Upvotes: 6

Joseph Silber
Joseph Silber

Reputation: 219936

Use compass' transition mixin:

@include transition(all 0.3s ease-in-out);

Upvotes: 53

Related Questions