Transitions & Animations

Workshop 1: Hover CTA Button

เริ่มจากปุ่ม call-to-action ที่ตอบสนองชัดแต่ไม่แรงเกินไป เป้าหมายของขั้นนี้คือแยกสถานะปกติ, :hover และ :active ให้เห็นชัด แล้วใช้ transition ช่วยให้การเปลี่ยนดูนุ่มนวล

Workshop 2: Feature Card Hover

ต่อด้วย card เล็ก ๆ ที่ใช้ motion เพื่อสื่อว่าคลิกได้ ขั้นนี้ตั้งใจให้เห็นว่า animation ที่ดีไม่จำเป็นต้องขยับเยอะ แค่ยกขึ้นนิดเดียวและปรับเงาให้คมขึ้นก็พอ

Workshop 3: Notification Pulse

ขั้นนี้จะเริ่มใช้ @keyframes กับ animation properties โดยเลือก use-case ที่สั้นและชัดที่สุด คือ badge แจ้งเตือนที่ pulse เบา ๆ เพื่อเรียกสายตาโดยไม่รบกวนเกินไป

Workshop 4: Loading Dots

ปิดท้ายด้วย loading dots เพื่อฝึกเรื่อง animation-delay และการทำ motion ซ้ำกับหลาย element ให้เริ่มไม่พร้อมกัน ผลลัพธ์จะดูมีจังหวะมากขึ้นทันทีแม้ใช้ keyframes ชุดเดียวกัน