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

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fade-up-blocks-chain {
  0% {
    flex-basis: 0%;
    width: 0%;
    opacity: 0;
  }
  25% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  50% {
    flex-basis: 25%;
    width: 25%;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-up {
  0% {
    height: 0;
    opacity: 0;
  }
  25% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  50% {
    height: 98px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-up--mobile {
  0% {
    height: 0;
    opacity: 0;
  }
  25% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  50% {
    height: 202px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-in {
  animation: fade-in 1s ease-out forwards;
}

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

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

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

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