20

How can one do multiple css transitions like this Jsfiddle with Compass?

What I am trying to do is basecly write this code below with Compass.

-webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; 
   -moz-transition: top 0.3s ease-out, background .9s .5s ease-out; 
     -o-transition: top 0.3s ease-out, background .9s .5s ease-out; 
        transition: top 0.3s ease-out, background .9s .5s ease-out;
halliewuud
  • 2,735
  • 6
  • 30
  • 41

3 Answers3

48

Is this what you are looking for? http://compass-style.org/reference/compass/css3/transition/#mixin-transition

@include transition( top 0.3s ease-out, background .9s .5s ease-out );

Jackie
  • 1,630
  • 2
  • 15
  • 12
  • 3
    Does this still work for you? I came up with that aswell, but what I get is `transition: top 0.3s ease-out background .9s .5s ease-out;`. It leaves the comma out! Is this a (known) bug? [Am using `compass 0.13.alpha.12`] – MMachinegun Dec 30 '13 at 10:20
  • @marczking not sure if https://github.com/Igosuki/compass-mixins/issues/34 is related. it works for me if I pass in lists: `@include transition((top 0.3s ease-out), (background 0.9s ease-out)); – chemoish Oct 02 '15 at 20:27
-1

From the documentation:
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

It might have changed over the years but it is now like this:

single-transition($property, $duration, $function, $delay)

Notice the $delay is last, not as in the correct answer where it is before last.

pm.lemay
  • 64
  • 7
-3

If you are using a mixin to define you transition and you get this error:

error: mixin transition only takes 1 arguments; given 2

try enclosing your values between parenthesis like:

@include transition( (bottom .5s, background 2s) );
Jordi Anguela
  • 11
  • The question is specific to Compass, which provides a transition mixin that would not generate this error. – cimmanon Jan 09 '15 at 15:21