@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)