ทำความเข้าใจ CSS3 Animations เบื้องต้น
ไม่ว่าจะช้า หรือเร็ว สุดท้ายแล้ว CSS Designer ส่วนใหญ่ก็คงต้องเดินไปถึงจุดนั้นอยู่ดี จุดนั้นในที่นี้ ผมหมายถึงเรื่องของ CSS3 และการทำ Animation ตามท้องเรื่อง เว้นเสียแต่ว่า “ไม่มีความจำเป็นใดใด” ที่ต้องทำ เอาเป็นว่านำเสนอไว้เผื่อเกิดความจำเป็นก็แล้วกันนะครับ แม้ว่ามันจะ ขาดๆ เกินๆ บ้าๆ บวมๆ ก็ตาม
ในบทความนี้ ผมขอพูดถึงเรื่อง พื้นๆ เพื่อเริ่มสร้างความเข้าใจกันไปก่อนนะครับ
คำสั่งพื้นฐานของ Animation ใน CSS3 มีดังนี้
- animation-name คือ การตั้งชื่อให้กับรูปแบบการแสดงการเคลื่อนไหว
- animation-duration คือ ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง
- animation-timing-function คือ รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหวของ keyframe
- animation-iteration-count คือ การทำซ้ำ เช่น จะให้ทำกี่รอบ หรือ infinite คือ วนไม่หยุด
- animation-direction คือ การสั่งทิศทางการเล่น เช่น จาก 1 ถึง 10 หรือจะให้เล่นถอยหลัง จาก 10 มา 1
- animation-delay คือ จะให้เริ่มทำทันที หรือ ดีเลย์ ตามเวลาที่กำหนด เช่น ถ้าเรากดปุ่มแล้วต้องการให้ animation ที่เราสั่งงานเริ่มเล่นเมื่อเวลาผ่านไปหลังจากกดปุ่ม 2 วินาที เราสามารถกำหนดได้ใน animation-delay โดยค่าเริ่มต้นคือ 0 ซึ่งเป็นการสั่งให้เล่นทันที
- animation คือ shorthand property หรือการเขียนแบบย่อ โดยการใส่ค่าควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>