generate-animation-from-timecodes.scss

@mixin generateAnimation($selector, $name, $manifest) {
  $totalDuration: 0ms;
  @each $time, $rules in $manifest {
    $totalDuration : $totalDuration + $time;
  }

  $scalingTimeAcc: 0ms;
  $previousKeyframe: -1;
  @keyframes #{$name} {
    @each $time, $rules in $manifest {
      $scalingTimeAcc : $scalingTimeAcc + $time;
      $keyframe : round($scalingTimeAcc / $totalDuration * 100%);
      // Rounding can cause duplicate keyframes, in which case we skip
      @if ($keyframe > $previousKeyframe) {
        $previousKeyframe: $keyframe;
        #{$keyframe} {
          @each $property, $value in $rules {
            #{$property}: #{$value};
          }
        }
      }
      
    }
  }

  #{$selector} {
    animation-name: $name;
    animation-duration: $totalDuration;
  }
}

/*
----------------
  Example usage:
----------------
*/

@include generateAnimation(
  '.myElement',
  'exampleAnimationName',
  (
    (0ms, (
      opacity: 1,
      color: red
    )),
    (300ms, (
      opacity: 0.5,
      color: blue
    )),
    (250ms, (
      opacity: 1,
      color: blue
    )),
    (100ms, (
      opacity: 1,
      color: red
    )),
  
  )
);

/*
----------------------
  Output from example:
----------------------
*/

@keyframes exampleAnimationName {
  0% {
    opacity: 1;
    color: red;
  }
  46% {
    opacity: 0.5;
    color: blue;
  }
  85% {
    opacity: 1;
    color: blue;
  }
  100% {
    opacity: 1;
    color: red;
  }
}
.myElement {
  animation-name: "exampleAnimationName";
  animation-duration: 650ms;
}