Silica Animations

.header-nav {
  animation: headerNavAnimation 0.3s var(--ease_appleSpring) both;
  will-change: opacity, transform, filter;

  @keyframes headerNavAnimation {
    from {
      opacity: 0;
      transform: translateY(-10%);
      filter: blur(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}

@keyframes artistHeaderAnimation {
  from {
    opacity: 0;
    transform: translateY(-25%);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes pageStackItemAnimation {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[sfc-name="ArtistHeader"] {
  .banner-container {
    animation: artistHeaderAnimation 0.3s var(--appleEase);
  }
}

.tracks-container {
  animation: tracksContainerAnimation 0.3s var(--ease_appleSpring) both;
  will-change: opacity, transform;

  @keyframes tracksContainerAnimation {
    from {
      opacity: 0;
      transform: translateY(10%);
      filter: blur(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}

.page-stack-container {
  .page-stack-item {
    animation: pageStackItemAnimation 0.3s var(--ease_appleSpring) both;
    will-change: opacity, transform, filter;
  }

  .page-stack-item:nth-child(1) {
    animation-delay: 0ms;
  }

  .page-stack-item:nth-child(2) {
    animation-delay: 40ms;
  }

  .page-stack-item:nth-child(3) {
    animation-delay: 80ms;
  }

  .page-stack-item:nth-child(4) {
    animation-delay: 120ms;
  }

  .page-stack-item:nth-child(5) {
    animation-delay: 160ms;
  }
}