Compass multiple css transitions

Question

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;

Jackie · Accepted Answer · 2012-07-13 18:04:49Z

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

answered Jul 13, 2012 at 18:04

Jackie

1,6502 gold badges15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MMachinegun Over a year ago

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]

chemoish Over a year ago

@marczking not sure if 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));

pm.lemay · Accepted Answer · 2015-05-12 17:28:09Z

-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.

answered May 12, 2015 at 17:28

pm.lemay

647 bronze badges

Comments

Jordi Anguela · Accepted Answer · 2015-01-09 15:16:51Z

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

answered Jan 9, 2015 at 15:16

Jordi Anguela

11

1 Comment

cimmanon Over a year ago

The question is specific to Compass, which provides a transition mixin that would not generate this error.

Collectives™ on Stack Overflow

Compass multiple css transitions

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related