Last Updated: February 25, 2016
· jjkilpatrick

Transition Mixin with multiple vendor prefixes

This Mixin takes advantage of Sass's each loop to cover multiple vendor prefixes and make it easier to include transitions with a single include. It was written to be clean and small. Enjoy

@mixin transition($transition...) {
    $prefixes:  ("-webkit", "-ms", "-o",  "");

        @each $prefix in $prefixes {
            #{$prefix}-transition: $transition;

    transition: $transition;

// Usage:</p>
element {

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