website/assets/scss/animations.scss

@keyframes shake {
  $distance: 1px;
  from { transform: translate(-$distance, $distance); }
  to { transform: translate($distance); }
}

@keyframes extreme-shake {
  $distance: 3px;
  from { transform: translate(-$distance); }
  to { transform: translate($distance); }
}

@keyframes bounce {
  $baseSize: 3em;
  $baseRotation: 20deg;
  from {
    transform: rotate($baseRotation) translateX($baseSize)
      translateY(-#{$baseSize / 5});
  }
  to {
    transform: rotate(-$baseRotation) translateX(-$baseSize)
      translateY(-#{$baseSize / 5});
  }
}

@keyframes mini-bounce {
  $baseSize: 0.5em;
  $baseRotation: 2deg;
  from {
    transform: rotate($baseRotation) translateX($baseSize)
      translateY(-#{$baseSize / 5});
  }
  to {
    transform: rotate(-$baseRotation) translateX(-$baseSize)
      translateY(-#{$baseSize / 5});
  }
}

@keyframes pulse {
  from {
    width: #{$tooltip-size / 2};
  }
  to {
    width: #{$tooltip-size};
  }
}

@keyframes rainbow {
  $colorOrder: "07" "08" "09" "0A" "0B" "0C" "0D" "0E" "0F";
  $divide: floor(100 / length($colorOrder));
  @for $i from 1 to length($colorOrder) {
    #{$i * $divide}% {
      fill: var(--base#{nth($colorOrder, $i)});
      color: var(--base#{nth($colorOrder, $i)});
    }
  }
}

@keyframes blur-blur {
  from { filter: blur(1em); }
  to { filter: blur(0); }
}