背景とかがフェードで切り替わるSassのmixin

「Adobe MAX Japan 2016（9/2開催） | Adobe Creative Station」のセッションで使ったトリッキーなSCSS

mixin

@mixin fade($classes) {
  $length: length($classes);
  $persent: percentage(1 / $length);
  @each $class in $classes {
    $index: index($classes, $class);
    $step1: ($persent * $index) - $persent;
    $step2: ($persent * $index) - 3;
    $step3: $persent * $index;
    $step0: $step1 - 3;

    .#{$class} {
      animation-name: #{$class};
      @if $index == 1 {
        opacity: 1;
      }
    }
    @keyframes #{$class} {
      @if $index == $length {
        #{$step0} {
          opacity: 0;
        }        
      }
      @if $index > 1 {
        #{$step0} {
          opacity: 0;
        }        
      }
      #{$step1} {
        opacity: 1;
      }
      #{$step2} {
        opacity: 1;
      }
      @if $index != $length {    
        #{$step3} {
          opacity: 0;
        }
      }
    }
  }
}

変数

$fade-duration: 10s;
$fade-classes: (
  hero__item1,
  hero__item2,
  hero__item3,
  hero__item4
);

SCSS

.hero {
  position: relative;
  height: 100vh;
}
[class*="hero__item"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  animation-duration: $fade-duration;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@include fade($fade-classes);