@keyframes placeHolderShimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

%shimmer {
  animation: placeHolderShimmer 1s ease-out infinite;
  animation-fill-mode: forwards;
  background: linear-gradient(90deg, $black-05, $black-05, $black-02, $black-02, $white, $black-02, $black-05, $black-05);
  background-size: 400%;
}

// Fade in things
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@mixin fade-in($speed: .3s) {
  opacity: 0;
  animation: fade-in ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: $speed;

  &--active {
    opacity: 1;
    display: block;
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

%shimmer {
  animation: placeHolderShimmer 1s ease-out infinite;
  animation-fill-mode: forwards;
  background: linear-gradient(90deg, $opaque-black-05, $opaque-black-05, $opaque-black-02, $opaque-black-02, $white, $opaque-black-02, $opaque-black-05, $opaque-black-05);
  background-size: 400%;
}

// Fade in things
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@mixin fade-in($speed: .3s) {
  opacity: 0;
  animation: fade-in ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: $speed;

  &--active {
    opacity: 1;
    display: block;
  }
}

Improve loading shimmer on Safari
Improve loading shimmer on Safari
