Mixin to create css animation keyframes

keyframe-mixin.md

/* Author : Manikandan K */

mixin to create css animation keyframes

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

usage in .scss

@include keyframes(animName){
    100% { 
        height: 80vh; 
    }
}

output in .css

@-webkit-keyframes animName {
  100% {
    height: 80vh;
  }
}
@-moz-keyframes animName {
  100% {
    height: 80vh;
  }
}
@keyframes animName {
  100% {
    height: 80vh;
  }
}