$animation-ease-default: ease-in;
$animation-transition-properties: transform opacity;

$animation-time-fast: 0.15s;
$animation-time-default: 0.3s;
$animation-time-slow: 0.6s;

@mixin transition($props: $animation-transition-properties, $time: $animation-time-default, $ease: $animation-ease-default) {
  $transition: '';

  @each $p in $props {
    // we do not need the comma, if we are just starting to combine the string
    @if $transition == '' {
      $transition: '#{$p} #{$time} #{$ease}';
    } @else {
      $transition: '#{$transition}, #{$p} #{$time} #{$ease}';
    }
  }

  transition: #{$transition};
}

// usually we do not use multiple animations, so we dont have to
// split by name as for transitions, if you want to animate multple
// properties, then do so explicitly in the @keyframe-definition
@mixin animation($name, $time: $animation-time-default, $ease: $animation-ease-default, $delay: 0s, $params: '') {
  @if not $name {
    @warn 'Please provide the name for the keyframe-animation and define it';
  } @else {
    animation: #{$name} #{$time} #{$delay} #{$ease} #{$params};
  }
}