Transitions on transforms

Ran into an issue where transitions on transforms weren’t working in firefox. This is because the vendor prefixed transition needs to match the vendor prefixed transition-property.

Wrong:


-webkit-transition: transform 1s ease-in;
-moz-transition: transform 1s ease-in;
-o-transition: transform 1s ease-in;
transition: transform 1s ease-in;

Right:


-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
transition: transform 1s ease-in;

Here is the stack overflow thread that helped me figure this out: http://stackoverflow.com/questions/13782277/css3-transforms-and-transitions-webkit.

Mixin Usage

In addition, bootstrap has a mixin for this that is included in our starter theme:


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

To use:

@include transition-transform(1s ease-in)

...or if you're chaining transition properties:

@include transition-transform(1s ease-in, opacity .2s linear)