@keyframes และ animation

เมื่อต้องการลำดับเอง ไม่ใช่แค่ A→B จาก state

ใช้ @keyframes กำหนดจุดระหว่างทาง แล้วผูกชื่อด้วย animation

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  animation: fade-up 500ms ease both;
}

คำสั้น ๆ ใน animation

ชื่อ · ระยะ · จังหวะ · iteration-count · direction · fill-mode (เช่น both)