$keyframe-name: pulse;
$val: 20;

@-webkit-keyframes #{$keyframe-name} {
  @for $i from 0 through 5 {
    #{20% * $i} {
      opacity: $i / $val;
    }
  }
}

@-moz-keyframes #{$keyframe-name} {
  @for $i from 0 through 5 {
    #{20% * $i} {
      opacity: $i / $val;
    }
  }
}

@-ms-keyframes #{$keyframe-name} {
  @for $i from 0 through 5 {
    #{20% * $i} {
      opacity: $i / $val;
    }
  }
}

@-o-keyframes #{$keyframe-name} {
  @for $i from 0 through 5 {
    #{20% * $i} {
      opacity: $i / $val;
    }
  }
}

@keyframes #{$keyframe-name} {
  @for $i from 0 through 5 {
    #{20% * $i} {
      opacity: $i / $val;
    }
  }
}

@-webkit-keyframes auto-color {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: yellow;
  }
}

@-moz-keyframes auto-color {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: yellow;
  }
}

@-ms-keyframes auto-color {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: yellow;
  }
}

@-o-keyframes auto-color {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: yellow;
  }
}

@keyframes auto-color {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: yellow;
  }
}

@-webkit-keyframes foo {
  from {
    color: black;
  }
  to {
    color: white;
  }
}

@-moz-keyframes foo {
  from {
    color: black;
  }
  to {
    color: white;
  }
}

@-ms-keyframes foo {
  from {
    color: black;
  }
  to {
    color: white;
  }
}

@-o-keyframes foo {
  from {
    color: black;
  }
  to {
    color: white;
  }
}

@keyframes foo {
  from {
    color: black;
  }
  to {
    color: white;
  }
}