ชุดคำสั่ง CSS Animation ช่วยให้ภาพเคลื่อนไหว

ชุดคำสั่ง CSS Animation ช่วยให้ภาพเคลื่อนไหว 

ภาพเคลื่อนไหวขององค์ประกอบ HTML โดยไม่ต้องใช้ JavaScript หรือ Flash

เรียนรู้เกี่ยวกับคุณสมบัติ  CSS ที่ใช้ในการควบคุมคุณสมบัติการแสดงผล ดังต่อไปนี้:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

@keyframes เรียกว่า "คีย์เฟรม" มีคุณสมบัติ "กำหนดลักษณะที่องค์ประกอบจะมีในบางช่วงเวลา

หลักการในการทำงาน

เมื่อคุณสร้างคำสั่งสไตล์ไว้ภายใน CSS ด้วย @keyframes

ผลลัพธ์ "ภาพเคลื่อนไหวจะค่อยๆ เปลี่ยนจากสไตล์ปัจจุบันเป็นสไตล์ใหม่ในบางช่วงเวลา"

การเคลื่อนไหวในรูปแบบแอนิเมชันบนหน้า Website
คุณต้องผูกแอนิเมชัน (css > animation) กับ องค์ประกอบ (Element, Tag)

ตัวอย่าง The animation-timing-function property specifies

คุณสมบัติ animation-timing-function คือ ระบุเส้นโค้ง > ความเร็วของภาพเคลื่อนไหว

การกำหนดคุณสมบัติฟังก์ชั่น animation-timing-function ให้กับภาพเคลื่อนไหวสามารถมีค่าดังต่อไปนี้:

ease - ระบุแอนิเมชั่นโดยเริ่มช้า เร็ว แล้วจบช้า (เป็นค่าเริ่มต้น)

linear - ระบุภาพเคลื่อนไหวด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบ

ease-in - ระบุภาพเคลื่อนไหวที่มีการเริ่มช้า

ease-out - ระบุภาพเคลื่อนไหวที่มีการสิ้นสุดช้า

ease-in-out - ระบุภาพเคลื่อนไหวที่มีการเริ่มต้นและสิ้นสุดช้า

cubic-bezier(n,n,n,n) - ให้คุณกำหนดค่าของคุณเองในฟังก์ชันลูกบาศก์เบซิเยร์

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

แหล่งเรียนรู้ - W3School - Learning For an Animation