blockscout/apps/block_scout_web/assets/css/components/_animations.scss

@keyframes fade-in {
  0% {
    transform: scale(0.97);
    opacity: 0;
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-up-blocks-chain {
  0% {
    flex-basis: 0%;
    width: 0%;
    opacity: 0;
    overflow-x: hidden;
  }

  50% {
    opacity: 0;
  }

  100% {
    flex-basis: 25%;
    width: 25%;
    opacity: 1;
    overflow-x: auto;
  }
}

@keyframes fade-up {
  0% {
    height: 0;
    opacity: 0;
  }

  25% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  100% {
    height: 100%;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shrink-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(0.75);
  }
}

.fade-in {
  animation: fade-in 0.6s ease-out 0.4s backwards;
}

.fade-up-blocks-chain {
  will-change: transform, opacity, width;
  white-space: nowrap;
  animation: fade-up-blocks-chain 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);

  @include media-breakpoint-down(md) {
    animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}

.fade-up {
  will-change: transform, opacity, height;
  animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);

  @media (max-width: 767px) {
    max-height: 300px;
    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}

.shrink-out {
  transform-origin: bottom center;
  animation: shrink-out 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}