SASS/SCSS mixin for filter transition

_main.scss

img.lazy{
      @include filter(blur, 30px);
      &.lazy-loaded{
        @include filter(blur, 0px);
        @include transition(filter .5s ease-out);
      }
}

_mixins.scss

@mixin filter($filter, $value) { 
  -webkit-filter: $filter+unquote('(#{$value})');
  -moz-filter: $filter+unquote('(#{$value})');
  -ms-filter: $filter+unquote('(#{$value})');
  -o-filter: $filter+unquote('(#{$value})');
  filter: $filter+unquote('(#{$value})');
}

@mixin transition($transition...) {
    @if str-index(quote($transition), "filter")==1  {
      -moz-transition:    unquote(str-insert(quote($transition),"-moz-",1));
      -o-transition:      unquote(str-insert(quote($transition),"-o-",1));
      -webkit-transition: unquote(str-insert(quote($transition),"-webkit-",1));
      transition:         $transition;
    } @else {
      -moz-transition:    $transition;
      -o-transition:      $transition;
      -webkit-transition: $transition;
      transition:         $transition;
    }
}

output.css

img.img-lazy {
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -ms-filter: blur(30px);
    -o-filter: blur(30px);
    filter: blur(30px);
}
img.img-lazy.lazy-loaded {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
    -moz-transition: -moz-filter 0.5s ease-out;
    -o-transition: -o-filter 0.5s ease-out;
    -webkit-transition: -webkit-filter 0.5s ease-out;
    transition: filter 0.5s ease-out
}