How to optimize @content-directive in sass mixins

animation.scss

// Variables

$fade: fade;
$slideDown: slideDown;
$duration: 1s;

// Default Animation mixins

@mixin animation {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}

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

// Specific animation ($fade)

.fade {
  @include animation;
  -webkit-animation-name: $fade;
  -moz-animation-name: $fade;
  -o-animation-name: $fade;
  animation-name: $fade;
}

@include keyframes($fade) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
  
// Specific animation ($slideDown)

.slideDown {
  @include animation;
  -webkit-animation-name: $slideDown;
  -moz-animation-name: $slideDown;
  -o-animation-name: $slideDown;
  animation-name: $slideDown;
}

@include keyframes($slideDown) {
  0% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}