Skip to content

Instantly share code, notes, and snippets.

@philippebarbosa
Last active December 20, 2015 03:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save philippebarbosa/6063730 to your computer and use it in GitHub Desktop.
Save philippebarbosa/6063730 to your computer and use it in GitHub Desktop.
Thanks for your help !
/*------------------------------------------------------*\
How to use transition on a vendor-prefixed property ?
http://bourbon.io/docs/#transitions
\*-------------------------------------------------------*/
.example {
@include transition (transition-property-names((transform), moz) 1.0s ease-in);
}
/*
So we would like to have :
.example {
-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
transition: transform 1s ease-in;
}
But when we use the mixin from Bourbon, it compile :
.example {
// -moz- everywhere !
-webkit-transition: -moz-transform 1s ease-in 0s;
-moz-transition: -moz-transform 1s ease-in 0s;
transition: -moz-transform 1s ease-in 0s;
}
Tried :
@include transition (transition-property-names((transform), (webkit, moz, o)) 1.0s ease-in);
but that don't work !
Thanks !
*/
@plapier
Copy link

plapier commented Jul 23, 2013

For transforming a prefixed property-name, use the transition properties individually, not the shorthand mixin.

Like so:

    @include transition-property (transform);
    @include transition-duration(1.0s);
    @include transition-timing-function(ease-in);

@philippebarbosa
Copy link
Author

Thanks for your help @plapier :-) It helps but i would like to use a shorthand as i do for every mixins. anyway no prob.
So you're telling us that mixin doesn't work at all ? If so, why still keepin it in the lib ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment