SCSS Loops

test.css

#foo {
  -webkit-animation: foo 2s 3s normal;
  -moz-animation: foo 2s 3s normal;
  -ms-animation: foo 2s 3s normal;
  -o-animation: foo 2s 3s normal;
  animation: foo 2s 3s normal; }

test.scss

@mixin animation($name, $duration: 1s, $delay: 0s, $direction: normal) {
  @each $vendor in -webkit, -moz, -ms, -o {
    #{$vendor}-animation: #{$name} #{$duration} #{$delay} #{$direction};
  }
  animation: #{$name} #{$duration} #{$delay} #{$direction};
}

#foo {
  @include animation(foo, 2s, 3s, normal);
}