Entrance animation in CSS

In css file

/* styles.css or global.css */
@keyframes fadeUpScale {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-up-scale {
  animation: fadeUpScale 0.4s ease-out forwards;
}

---

HTML: Apply the class

<div class="fade-up-scale">
  <!-- Your content here -->
</div>

---

Optional: Delay or slower speed

You can add classes like:

.fade-up-scale-delay {
  animation-delay: 0.2s;
  animation-duration: 0.6s;
}

Then apply:

<div class="fade-up-scale fade-up-scale-delay">...</div>