_animations.scss with global animation defaults and @mixin transition($properties...)

_animations.scss

/* V1.2 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */

$animationDuration: 300ms;
$animationDurationMs: 300;
$animationDurationShort: 150ms;
$animationDurationShortMs: 150;
$animationDurationLong: 30000ms;
$animationDurationLongMs: 30000;
$animationFunction: ease;


:export {
  animationDuration: $animationDuration;
  animationDurationMs: $animationDurationMs;
  animationDurationShort: $animationDurationShort;
  animationDurationShortMs: $animationDurationShortMs;
  animationDurationLong: $animationDurationLong;
  animationDurationLongMs: $animationDurationLongMs;
  animationFunction: $animationFunction;
}


@mixin transition($properties...) {
  transition: transition($properties...);
}
@function transition($properties...) {
  $transition: ();

  @each $property in $properties {
    $transition: append($transition, $property $animationDuration $animationFunction, comma);
  }

  @return $transition;
}

@mixin transitionShort($properties...) {
  transition: transitionShort($properties...);
}
@function transitionShort($properties...) {
  $transition: ();

  @each $property in $properties {
    $transition: append($transition, $property $animationDurationShort $animationFunction, comma);
  }
  @return $transition;
}

@mixin transitionLong($properties...) {
  transition: transitionLong($properties...);
}
@function transitionLong($properties...) {
  $transition: ();

  @each $property in $properties {
    $transition: append($transition, $property $animationDurationLong $animationFunction, comma);
  }

  @return $transition;
}

@mixin transitionDurationOverride($durationOverride, $properties...) {
  transition: transitionDurationOverride($durationOverride, $properties...);
}
@function transitionDurationOverride($durationOverride, $properties...) {
  $transition: ();

  @each $property in $properties {
    $transition: append($transition, $property $durationOverride $animationFunction, comma);
  }

  @return $transition;
}


@mixin animation($name) {
  animation: $name $animationDuration $animationFunction;
}

@mixin animationShort($name) {
  animation: $name $animationDurationShort $animationFunction;
}

@mixin animationLong($name) {
  animation: $name $animationDurationLong $animationFunction;
}

@mixin animationDurationOverride($durationOverride, $name) {
  animation: $name $durationOverride $animationFunction;
}


@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}