กวดวิชาภาพเคลื่อนไหว CSS: คู่มือฉบับสมบูรณ์สำหรับผู้เริ่มต้น

นี่คือคู่มือไวยากรณ์ฉบับสมบูรณ์และบทช่วยสอนภาพเคลื่อนไหว CSS เชิงโต้ตอบสำหรับผู้เริ่มต้น ใช้เป็นข้อมูลอ้างอิงเพื่อเรียนรู้ส่วนต่างๆ ของข้อมูลจำเพาะภาพเคลื่อนไหว CSS

ประสิทธิภาพของเบราว์เซอร์มาไกลในช่วง 10 ปีที่ผ่านมา การเพิ่มแอนิเมชั่นแบบอินเทอร์แอกทีฟให้กับหน้าเว็บนั้นเป็นเรื่องที่ท้าทายกว่ามาก เนื่องจากอาจเกิดปัญหาในการแสดงผลและประสิทธิภาพ แต่ในปัจจุบันนี้ แอนิเมชั่น CSS สามารถใช้ได้อย่างอิสระมากกว่า และโดยทั่วไปแล้ว ไวยากรณ์จะเรียนรู้ได้ง่ายกว่ามากเมื่อเทียบกับฟีเจอร์ CSS เช่น grid หรือ flexbox

มีคุณลักษณะต่างๆ ที่เป็นส่วนหนึ่งของข้อกำหนดภาพเคลื่อนไหว W3C CSS บางอย่างใช้งานง่ายกว่าคนอื่นๆ บทช่วยสอนเกี่ยวกับแอนิเมชั่น CSS คีย์เฟรมนี้จะอธิบายไวยากรณ์ทั้งหมด ซึ่งรวมถึงคุณสมบัติต่างๆ แต่ละรายการด้วย ฉันจะรวมการสาธิตเชิงโต้ตอบเพื่อช่วยให้คุณเข้าใจสิ่งที่เป็นไปได้ด้วยภาพเคลื่อนไหว CSS

ไวยากรณ์ @keyframes

แอนิเมชั่น CSS ทุกรายการมีสองส่วนด้วยกัน: คุณสมบัติ animation-* หนึ่งรายการขึ้นไปพร้อมกับชุดคีย์เฟรมแอนิเมชั่นที่กำหนดโดยใช้ @keyframes at-rule มาดูรายละเอียดกันว่าจะสร้างชุดกฎ @keyframes ได้อย่างไร

ไวยากรณ์มีลักษณะดังนี้:

 @keyframes moveObject { 0% { transform: translateX(0); } 50% { transform: translateX(300px); } 100% { transform: translateX(300px) scale(1.5); } }

ดังที่แสดงไว้ที่นี่ @keyframes at-rule ประกอบด้วยสามส่วนพื้นฐาน:

• กฎ @keyframes ตามด้วยชื่อแอนิเมชั่นที่กำหนดเอง
• ชุดวงเล็บปีกกาที่ครอบคีย์เฟรมทั้งหมด
• คีย์เฟรมอย่างน้อย 1 รายการ โดยแต่ละรายการมีเปอร์เซ็นต์ตามด้วยชุดกฎที่ล้อมรอบด้วยวงเล็บปีกกา

ในตัวอย่างแรกของบทช่วยสอนเรื่องภาพเคลื่อนไหว CSS นี้ ฉันได้กำหนดแอนิเมชั่นด้วยชื่อ moveObject ชื่อนี้สามารถเป็นชื่อใดก็ได้ที่ฉันต้องการ คำนึงถึงขนาดตัวพิมพ์ และต้องปฏิบัติตามกฎตัวระบุที่กำหนดเองใน CSS ชื่อที่กำหนดเองนี้ต้องตรงกับชื่อที่ใช้ในคุณสมบัติ animation-name (จะกล่าวถึงในภายหลัง)

ในตัวอย่างของฉัน คุณจะสังเกตเห็นว่าฉันใช้เปอร์เซ็นต์เพื่อกำหนดแต่ละคีย์เฟรมในแอนิเมชั่นของฉัน หากแอนิเมชั่นของฉันมีคีย์เฟรมที่เท่ากับ 0% และ 100% ฉันสามารถใช้คีย์เวิร์ด from และ to แทนได้:

 @keyframes moveObject { from { transform: translateX(0); } 50% { transform: translateX(300px); } to { transform: translateX(300px) scale(1.5); } }

CodePen แบบโต้ตอบต่อไปนี้ใช้ไวยากรณ์ด้านบนในตัวอย่างสด:

ในการสาธิต ฉันได้รวมปุ่มที่รีเซ็ตภาพเคลื่อนไหว ฉันจะอธิบายในภายหลังว่าทำไมจึงจำเป็น แต่สำหรับตอนนี้ แค่รู้ว่าแอนิเมชั่นนี้มีคีย์เฟรมสามคีย์ที่แสดงขั้นตอนในลำดับของแอนิเมชันนี้: จุดเริ่มต้น ขั้นตอน 50% และจุดสิ้นสุด (เช่น 0% 50% และ 100%) แต่ละรายการใช้สิ่งที่เรียกว่าตัวเลือกคีย์เฟรมร่วมกับวงเล็บปีกกาเพื่อกำหนดคุณสมบัติในขั้นตอนนั้น

สิ่งที่ควรทราบเกี่ยวกับไวยากรณ์ @keyframes :

• คุณจัดชุดกฎคีย์เฟรมในลำดับใดก็ได้ตามต้องการ และเบราว์เซอร์จะยังเรียกใช้ชุดกฎดังกล่าวในลำดับที่กำหนดโดยเปอร์เซ็นต์
• คุณสามารถละเว้นคีย์เฟรม 0% และ 100% และเบราว์เซอร์จะกำหนดสิ่งเหล่านี้โดยอัตโนมัติตามสไตล์ที่มีอยู่ในองค์ประกอบที่กำลังเคลื่อนไหว
• หากมีคีย์เฟรมที่ซ้ำกันซึ่งมีชุดกฎต่างกัน (เช่น คีย์เฟรมสองตัวสำหรับ 20% โดยมีค่าการแปลงที่ต่างกัน) เบราว์เซอร์จะใช้คีย์เฟรมสุดท้าย
• คุณสามารถกำหนดหลายคีย์เฟรมในตัวเลือกคีย์เฟรมเดียวด้วยเครื่องหมายจุลภาค: 10%, 30% { ... }
• คีย์เวิร์ด !important จะลบค่าคุณสมบัติใดๆ ดังนั้นจึงไม่ควรใช้กับคุณสมบัติภายในชุดกฎคีย์เฟรม

ตอนนี้ คุณมีความเข้าใจที่ดีเกี่ยวกับไวยากรณ์ @keyframes ในบทช่วยสอนเกี่ยวกับแอนิเมชั่น CSS นี้แล้ว มาดูคุณสมบัติของแอนิเมชั่นต่างๆ ที่กำหนดไว้ในองค์ประกอบที่กำลังเคลื่อนไหวกัน

คุณสมบัติแอนิเมชั่นที่เราจะกล่าวถึง:

• คุณสมบัติชื่อแอนิเมชั่น
• คุณสมบัติระยะเวลาแอนิเมชั่น
• คุณสมบัติของแอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน
• แอนิเมชั่น-วนซ้ำ-นับคุณสมบัติ
• คุณสมบัติทิศทางภาพเคลื่อนไหว
• คุณสมบัติแอนิเมชั่นเล่นสถานะ
• แอนิเมชั่น-ดีเลย์คุณสมบัติ
• คุณสมบัติโหมดเติมแอนิเมชั่น
• คุณสมบัติชวเลขแอนิเมชั่น
• การนำแอนิเมชั่นหลายๆ อันไปใช้กับองค์ประกอบเดียว

คุณสมบัติชื่อแอนิเมชั่น

ดังที่กล่าวไว้ ทุกแอนิเมชั่น CSS ที่คุณสร้างต้องมีชื่อที่ปรากฏในไวยากรณ์ @keyframes ชื่อนี้ต้องเป็นชื่อเดียวกับที่กำหนดโดยใช้คุณสมบัติ animation-name

การใช้ CSS จากการสาธิตครั้งก่อน ไวยากรณ์มีลักษณะดังนี้:

 .box { animation-name: moveObject; }

อีกครั้ง ชื่อที่กำหนดเองที่ฉันกำหนดจะต้องมีชื่อสำหรับ @keyframes at-rule ด้วย ไม่เช่นนั้นชื่อนี้จะไม่ทำอะไรเลย คุณสามารถคิดได้เหมือนกับการเรียกใช้ฟังก์ชันใน JavaScript ฟังก์ชันเองจะเป็นส่วน @keyframes moveObject {} ของโค้ด ในขณะที่การเรียกใช้ฟังก์ชันคือ animation-name: moveObject

สิ่งที่ควรทราบเกี่ยวกับ animation-name :

• ค่าเริ่มต้นสำหรับ animation-name คือ none ซึ่งหมายความว่าไม่มีคีย์เฟรมที่ทำงานอยู่ สามารถใช้เป็น 'สลับ' เพื่อปิดใช้งานแอนิเมชั่นได้
• ชื่อที่คุณเลือกเป็นแบบพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ และสามารถประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และขีดกลาง
• อักขระตัวแรกในชื่อต้องเป็นตัวอักษรหรือยัติภังค์ แต่มีเครื่องหมายยัติภังค์เดียวเท่านั้น
• ชื่อไม่สามารถเป็นคำสงวน เช่น unset initial หรือ inherit

คุณสมบัติระยะเวลาแอนิเมชั่น

คุณสมบัติ animation-duration ไม่แปลกใจเลยที่จะกำหนดระยะเวลาที่แอนิเมชันใช้ในการเรียกใช้หนึ่งครั้งตั้งแต่ต้นจนจบ ค่านี้สามารถระบุได้ในหน่วยวินาทีหรือมิลลิวินาที ดังที่แสดงด้านล่าง:

 .box { animation-duration: 2s; }

ข้างต้นจะเทียบเท่ากับต่อไปนี้:

 .box { animation-duration: 2000ms; }

คุณสามารถดูคุณสมบัติ animation-duration ในการดำเนินการในการสาธิต CodePen ต่อไปนี้ ในการสาธิตนี้ คุณสามารถเลือกได้ว่าต้องการให้แอนิเมชั่นอยู่ได้นานแค่ไหน ลองป้อนค่าต่างๆ ในหน่วยวินาทีหรือมิลลิวินาที จากนั้นใช้ปุ่ม "ทำให้กล่องเคลื่อนไหว" เพื่อเรียกใช้ภาพเคลื่อนไหว

หากคุณใช้ตัวเลขเล็กๆ ร่วมกับ ms สำหรับหน่วย คุณอาจไม่สังเกตเห็นการเคลื่อนไหวใดๆ ลองตั้งค่าตัวเลขที่สูงขึ้นหากคุณใช้มิลลิวินาที

หมายเหตุบางประการเกี่ยวกับการใช้ animation-duration :

• ค่าลบไม่ถูกต้อง
• ต้องรวมหน่วยด้วย แม้ว่าระยะเวลาจะถูกตั้งเป็น 0s (ค่าเริ่มต้น)
• คุณสามารถใช้ค่าเศษส่วน (เช่น 0.8s )

คุณสมบัติของแอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน

animation-timing-function ซึ่งไม่ชัดเจนในความหมายเหมือนกับคุณสมบัติสองอย่างก่อนหน้านี้ ใช้เพื่อกำหนดลักษณะที่ภาพเคลื่อนไหว CSS ดำเนินไป นั่นอาจไม่ใช่คำอธิบายที่ชัดเจนที่สุด แต่ไวยากรณ์อาจช่วยชี้แจงได้

การประกาศมีลักษณะดังนี้:

 .box { animation-timing-function: linear; }

คุณสมบัตินี้ยอมรับค่าคีย์เวิร์ดต่อไปนี้:

• ease (ค่าเริ่มต้น)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

ค่าส่วนใหญ่เข้าใจได้ง่ายจากชื่อ แต่คุณสามารถดูความแตกต่างได้โดยใช้การสาธิตเชิงโต้ตอบต่อไปนี้:

ใช้อินพุตที่เลือกเพื่อเลือกค่าคีย์เวิร์ดหนึ่งในเจ็ดค่า โปรดทราบว่าค่าความ ease-* จะ 'ความง่าย' ของแอนิเมชันในรูปแบบต่างๆ ค่าเชิงเส้นจะสม่ำเสมอตลอดทาง

คุณสมบัติ animation-timing-function ยังยอมรับฟังก์ชันต่อไปนี้:

• cubic-bezier() – ยอมรับค่าตัวเลขสี่ค่าที่เป็นอาร์กิวเมนต์ คั่นด้วยเครื่องหมายจุลภาค
• steps() - ยอมรับเป็นอาร์กิวเมนต์สองค่า ตัวเลขและ "คำข้าม" คั่นด้วยเครื่องหมายจุลภาค

ค่าของคำหลัก step-start และ step-end เทียบเท่ากับค่า step steps(1, jump-start) และ steps(1, jump-end) ตามลำดับ

สำหรับ cubic-bezier() การสาธิตเชิงโต้ตอบต่อไปนี้อาจช่วยให้คุณเข้าใจฟังก์ชันดีขึ้นเล็กน้อย:

สังเกตว่าการสาธิตให้คุณตั้งค่าอาร์กิวเมนต์สี่ข้อในฟังก์ชัน cubic-bezier() อาร์กิวเมนต์สองข้อสามารถเป็นค่าลบได้ และสองอาร์กิวเมนต์ถูกจำกัดให้เป็นค่าทศนิยมระหว่าง 0 ถึง 1 สำหรับคำอธิบายที่เหมาะสมเกี่ยวกับวิธีการทำงานของไทม์มิ่งประเภทนี้ คุณสามารถดูบทความนี้หรือเครื่องมือแบบโต้ตอบนี้

ในทางกลับกัน ฟังก์ชัน steps() ยอมรับสองอาร์กิวเมนต์:

• จำนวนเต็มที่แสดง "หยุด" เท่ากับรอบเดียวของภาพเคลื่อนไหว
• คีย์เวิร์ดเสริมที่เรียกว่า “jumpterm” ซึ่งกำหนดว่าแอนิเมชั่น “ค้าง” ในช่วงเวลาที่กำหนดหรือไม่

อีกครั้ง การสาธิตเชิงโต้ตอบควรช่วยให้คุณเข้าใจว่า Jumpterm เหล่านี้ทำงานอย่างไร:

ลองเลือกจำนวนเต็มร่วมกับ Jumpterm (หรือลองใช้โดยไม่ใช้ Jumpterm) เพื่อดูว่าคีย์เวิร์ดต่างๆ แตกต่างกันอย่างไรโดยมีค่าจำนวนเต็มต่างกัน เห็นได้ชัดว่าอนุญาตให้ใช้จำนวนเต็มลบ แต่ฉันไม่เห็นความแตกต่างระหว่าง 0 และค่าลบใดๆ

แอนิเมชั่น-วนซ้ำ-นับคุณสมบัติ

ในบางกรณี คุณจะพอใจถ้าแอนิเมชั่นทำงานครั้งเดียว แต่บางครั้งคุณต้องการให้แอนิเมชั่นทำงานหลายครั้ง คุณสมบัติ animation-iteration-count ให้คุณทำได้โดยยอมรับจำนวนบวกที่แสดงจำนวนครั้งที่คุณต้องการให้แอนิเมชั่นทำงาน:

 .box { animation-iteration-count: 3; }

ค่าเริ่มต้นสำหรับ animation-iteration-count คือ 1 แต่คุณยังสามารถใช้คำหลัก infinite (อธิบายตนเองได้) หรือใช้ค่าเศษส่วน ค่าเศษส่วนจะเรียกใช้ส่วนแอนิเมชั่นในการรันเศษส่วน:

 .box { animation-iteration-count: 3.5; }

โค้ดด้านบนทำงานผ่านแอนิเมชั่นสามครั้งครึ่ง นั่นคือ การวนซ้ำทั้งหมดสามครั้ง ตามด้วย การวนซ้ำครั้งสุดท้ายหนึ่งครั้งที่หยุดไปครึ่งทางพอดี

คุณสมบัตินี้มีประโยชน์มากที่สุดเมื่อใช้ร่วมกับคุณสมบัติ animation-direction (จะกล่าวถึงต่อไป) เนื่องจากแอนิเมชั่นที่ทำงานตั้งแต่เริ่มต้นเท่านั้นจะไม่มีประโยชน์อย่างยิ่งหากเรียกใช้มากกว่าหนึ่งครั้ง

คุณสามารถลองใช้การสาธิตด้านล่างซึ่งช่วยให้คุณเลือกค่าเศษส่วนสำหรับการนับซ้ำได้ เพื่อให้คุณเห็นผล:

คุณสมบัติทิศทางภาพเคลื่อนไหว

ตามที่กล่าวไว้ข้างต้นในบทช่วยสอนเกี่ยวกับภาพเคลื่อนไหว CSS นี้ คุณสมบัติ animation-direction ทำงานได้ดีร่วมกับ animation-iteration-count คุณสมบัติ animation-direction ช่วยให้คุณกำหนดทิศทางที่คุณต้องการให้ภาพเคลื่อนไหวเล่น ไวยากรณ์มีลักษณะดังนี้:

 .box { animation-direction: alternate; }

คุณสามารถตั้งค่าเป็นหนึ่งในสี่คำหลัก:

• normal – แอนิเมชั่นเล่นไปข้างหน้าในการวนซ้ำครั้งแรก (ค่าเริ่มต้น)
• reverse – แอนิเมชั่นเล่นย้อนกลับในการวนซ้ำครั้งแรก
• alternate – แอนิเมชั่นเล่นไปข้างหน้าในการวนซ้ำครั้งแรกจากนั้นสลับในการวนซ้ำครั้งต่อ ๆ ไป
• alternate-reverse – เหมือนกับ alternate แต่เล่นย้อนกลับในการวนซ้ำครั้งแรก

คุณสามารถลองใช้ค่าต่างๆ กับจำนวนการวนซ้ำที่แตกต่างกันได้โดยใช้การสาธิตเชิงโต้ตอบด้านล่าง:

คุณสมบัติแอนิเมชั่นเล่นสถานะ

คุณสมบัติ animation-play-state ไม่ได้มีประโยชน์อย่างยิ่งในสภาพแวดล้อม CSS แบบคงที่ แต่อาจมีประโยชน์เมื่อเขียนแอนิเมชั่นที่มีการโต้ตอบผ่าน JavaScript หรือแม้แต่ CSS

คุณสมบัตินี้ยอมรับสองค่า: running หรือ paused :

 .box { animation-direction: paused; }

โดยค่าเริ่มต้น ภาพเคลื่อนไหวที่ระบุจะอยู่ในสถานะ "กำลังทำงาน" แต่คุณสามารถใช้ JavaScript เพื่อสลับค่าของคุณสมบัติได้ คุณยังสามารถใช้คุณลักษณะ CSS แบบโต้ตอบได้ เช่น :hover หรือ :focus เพื่อเปลี่ยนภาพเคลื่อนไหวเป็นสถานะ "หยุดชั่วคราว" ซึ่งจะทำให้ภาพเคลื่อนไหวหยุดนิ่งไม่ว่าจะอยู่ที่ใดในการวนซ้ำปัจจุบัน

การสาธิตเชิงโต้ตอบด้านล่างมีแอนิเมชั่นที่ทำงานอย่างไม่จำกัดโดยมีปุ่มสองปุ่มเพื่อ "หยุดชั่วคราว" และ "เล่นต่อ" ภาพเคลื่อนไหว

แอนิเมชั่น-ดีเลย์คุณสมบัติ

แอนิเมชั่นบางตัวได้รับการออกแบบมาให้เริ่มสร้างแอนิเมชั่นทันที ในขณะที่บางแอนิเมชั่นอาจได้รับประโยชน์จากความล่าช้าเล็กน้อยก่อนการวนซ้ำครั้งแรก คุณสมบัติ animation-delay ช่วยให้คุณทำสิ่งนี้ได้สำเร็จ

 .box { animation-delay: 4s; }

เช่นเดียวกับค่าตามเวลาอื่นๆ คุณสามารถตั้งค่าการ animation-delay เป็นค่าโดยใช้วินาทีหรือมิลลิวินาที คุณยังสามารถใช้ค่าเศษส่วนได้

สิ่งสำคัญคือต้องสังเกตว่าการหน่วงเวลาเกิดขึ้นเฉพาะในการวนซ้ำครั้งแรก ไม่ใช่การวนซ้ำแต่ละครั้ง คุณสามารถลองใช้การสาธิตเชิงโต้ตอบด้านล่าง:

การสาธิตให้ตัวเลือกแก่คุณในการเปลี่ยนค่าการวนซ้ำและการหน่วงเวลา คุณจึงเห็นได้ว่าการหน่วงเวลาไม่ส่งผลต่อการวนซ้ำในครั้งต่อๆ ไป – เฉพาะครั้งแรกเท่านั้น

วิธีที่น่าสนใจในการใช้คุณสมบัตินี้คือมีค่าติดลบ ตัวอย่างเช่น ใช้การสาธิตด้านบน ลองตั้งค่าการ animation-delay เป็น -0.5s คุณจะสังเกตเห็นว่าการหน่วงเวลาเชิงลบทำงานเหมือนกับการดำเนินไปข้างหน้าในไทม์แมชชีน – แอนิเมชั่นเริ่มต้นจากทางที่ผ่านมากกว่าจุดเริ่มต้น

คุณสมบัติโหมดเติมแอนิเมชั่น

คุณสมบัติ longhand สุดท้ายที่ฉันจะกล่าวถึงในบทช่วยสอนเกี่ยวกับอนิเมชั่น CSS นี้คือคุณสมบัติที่ฉันใช้ในการสาธิตครั้งก่อน คุณจะสังเกตเห็นว่าเมื่อภาพเคลื่อนไหวหยุดการวนซ้ำครั้งสุดท้าย กล่องจะยังคงอยู่ที่เดิม ทำได้โดยใช้ animation-fill-mode

 .box { animation-fill-mode: forwards; }

คุณสมบัตินี้กำหนดวิธีที่แอนิเมชั่นนำสไตล์ไปใช้กับองค์ประกอบเป้าหมายก่อนและหลังการดำเนินการ มันเข้าใจยากนิดหน่อยในเชิงแนวคิด ดังนั้นฉันจะครอบคลุมความหมายของแต่ละค่า จากนั้นคุณสามารถเปรียบเทียบค่าต่างๆ ได้โดยใช้การสาธิตเชิงโต้ตอบ

คุณสมบัตินี้ยอมรับค่าคีย์เวิร์ดสี่ค่าต่อไปนี้:

• none – ค่าเริ่มต้น ไม่มีสไตล์ที่ใช้ก่อนหรือหลังการดำเนินการ
• forwards – เก็บสไตล์ทั้งหมดที่ใช้ในคีย์เฟรมสุดท้ายของแอนิเมชั่น
• backwards – มากหรือน้อยย้อนกลับของค่าก่อนหน้า จะคงรูปแบบที่ใช้กับภาพเคลื่อนไหวไว้ทันทีที่เริ่มดำเนินการ แต่ก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น
• both – รักษาสไตล์สำหรับทั้ง forwards และ backwards

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

เพื่อความสะดวก ฉันได้เพิ่มการสาธิตทั้งหมดลงใน CodePen Collection ชุดเดียว

คุณจะสังเกตเห็นว่าการสาธิตช่วยให้คุณสามารถปรับโหมดการเติม การหน่วงเวลา ทิศทาง และจำนวนครั้งของการวนซ้ำ เนื่องจากสิ่งเหล่านี้อาจส่งผลต่อลักษณะที่ปรากฏ ฉันยังเพิ่มสีพื้นหลังที่แตกต่างกันให้กับกล่องภาพเคลื่อนไหวในคีย์เฟรมแรก ซึ่งช่วยให้ค่าโหมดเติมมีความชัดเจนขึ้นอีกเล็กน้อย หากคุณยังไม่เข้าใจว่า animation-fill-mode ทำงานอย่างไร คุณสามารถดูบทความเก่าที่ฉันเขียนซึ่งกล่าวถึง animation-fill-mode ในเชิงลึก

คุณสมบัติชวเลขแอนิเมชั่น

ฉันได้กล่าวถึงคุณสมบัติที่แตกต่างกันแปดประการในบทช่วยสอนแอนิเมชั่น CSS สำหรับผู้เริ่มต้นและฉันขอแนะนำให้คุณใช้มือยาว วิธีนี้จะช่วยให้คุณเห็นชุดค่าที่ชัดเจนได้ง่ายขึ้น

เมื่อคุณมีความเข้าใจที่ดีเกี่ยวกับคุณสมบัติแต่ละอย่างแล้ว คุณจะมีตัวเลือกในการใช้คุณสมบัติชวเลขของ animation ซึ่งช่วยให้คุณกำหนดคุณสมบัติ longhand ทั้งหมดในการประกาศครั้งเดียว

 .box { animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards; }

บอกตามตรง นั่นเป็นข้อมูลจำนวนมากในบรรทัดเดียว ฉันขอแนะนำให้ใช้ชวเลขหากการประกาศไม่ได้รวมคุณสมบัติทั้งหมด แต่อาจมีเพียงสามหรือสี่คุณสมบัติเท่านั้น

หากคุณใช้ชวเลข คุณสามารถใส่ค่าในลำดับใดก็ได้ที่คุณต้องการ แต่ให้สังเกตกฎต่อไปนี้:

• ค่าแรกที่กำหนดเวลาคือ animation-duration ; ค่าของเวลาต่อมาคือ animation-delay
• หากมีความขัดแย้งระหว่างคำหลักและ animation-name ค่าของคำหลักจะมีความสำคัญเหนือกว่าหากปรากฏขึ้นก่อน
• ค่าที่ละเว้นจะถอยกลับไปสู่สถานะเริ่มต้น เช่นเดียวกับคุณสมบัติชวเลข CSS

การนำแอนิเมชั่นหลายๆ อันไปใช้กับองค์ประกอบเดียว

คุณลักษณะสุดท้ายประการหนึ่งที่คุณควรทราบคือ คุณมีตัวเลือกในการใช้ภาพเคลื่อนไหวหลายรายการกับวัตถุชิ้นเดียวโดยคั่นภาพเคลื่อนไหวด้วยเครื่องหมายจุลภาค

นี่คือตัวอย่างการใช้ชวเลข:

 .box { animation: moveObject 2s ease-in-out, fadeBox 3s linear; }

ในที่นี้ ฉันได้กำหนดแอนิเมชั่นที่แตกต่างกันสองแบบที่จะจับคู่กับคีย์เฟรมสองชุดที่ต่างกัน แต่จะนำไปใช้กับออบเจกต์เดียวกัน รหัสเดียวกันนั้นสามารถเขียนด้วยมือยาวเป็น:

 .box { animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear; }

สังเกตว่าแต่ละคุณสมบัติมีค่าสองค่าโดยคั่นด้วยเครื่องหมายจุลภาคอย่างไร ในกรณีนี้ การจดชวเลขจะง่ายต่อการอ่านและบำรุงรักษาเกือบแน่นอน

สรุปการสอนเกี่ยวกับอนิเมชั่น CSS นี้

คำเตือนครั้งสุดท้าย: ใช้แอนิเมชั่นในปริมาณที่พอเหมาะ และจำไว้ว่าผู้ใช้เว็บบางคนอาจได้รับผลกระทบจากสีที่กะพริบและวัตถุที่เคลื่อนไหวเร็วอื่นๆ