บทความนี้สาธิตการใช้งานจริงในการเล่น/เพิ่มภาพเคลื่อนไหว CSS หลายรายการพร้อมกัน
วิธีเล่นภาพเคลื่อนไหว CSS หลายรายการพร้อมกัน
ด้วยการใช้แอนิเมชั่น CSS หลายๆ ตัวพร้อมกัน นักพัฒนาสามารถสร้างอินเทอร์เฟซที่น่าสนใจมากขึ้นได้อย่างง่ายดาย หากต้องการเล่นภาพเคลื่อนไหว CSS จำนวนมากพร้อมกัน ให้ตั้งชื่อแต่ละรายการที่ไม่ซ้ำกันและใช้ชื่อเหล่านั้นกับส่วนประกอบเดียวกันหรือแยกกันในหน้า
ปฏิบัติตามขั้นตอนด้านล่างเพื่อเล่น/เพิ่มแอนิเมชันมากกว่าหนึ่งรายการพร้อมกัน
ขั้นตอนที่ 1: การสร้างโครงสร้าง
ขั้นแรก สร้างองค์ประกอบ HTML ที่จะใช้แอนิเมชั่นในขั้นตอนต่อไป ตัวอย่างเช่น กำลังจะแทรกรูปภาพ:
< แผนก ระดับ = 'ช่วง' >
< img src = 'book.jpg' ความสูง = '100px' ความกว้าง = '100px' ระดับ = 'เคลื่อนไหว' >
< / แผนก >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก กำหนดเส้นทางของภาพเป็น “ src ' คุณลักษณะ.
- ต่อไป ค่าของ “ 100px ” มีไว้สำหรับคุณสมบัติ 'ความกว้าง' และ 'ความสูง' ของ CSS
- นอกจากนี้ ตั้งค่าของ “ เคลื่อนไหว ” ถึง “ ระดับ ' คุณลักษณะ.
ขั้นตอนที่ 2: การตั้งค่าภาพเคลื่อนไหว
“ คีย์เฟรม ” ใช้สร้างแอนิเมชั่นตามความต้องการของเว็บเพจ ตัวอย่างเช่น มีการสร้างภาพเคลื่อนไหวสองรายการในข้อมูลโค้ดด้านล่าง:
@-webkit-keyframes หมุน {100 % {
แปลงร่าง: หมุน ( 180องศา ) ;
}
}
@-webkit-keyframes สเกล {
100 % {
แปลงร่าง: scaleX ( 1 ) สเกลY ( 1 ) ;
}
}
ในข้อมูลโค้ดด้านบน:
- ประการแรก “ @-webkit-คีย์เฟรม ” มีการใช้กลไกในการตั้งค่า “ ปั่น ' และ ' หมุน ” ภาพเคลื่อนไหวที่มีชื่อ
- ถัดไป ใช้ “ แปลง ” ทรัพย์สินที่มีค่าเท่ากับ “ หมุน() ' ใน ' ปั่น ” เนื้อความแอนิเมชั่น ฟังก์ชันนี้จะหมุนองค์ประกอบในมุม “ 180องศา '.
- หลังจากนั้น ให้ตั้งค่าแอนิเมชันที่ขยายหรือขยายองค์ประกอบดั้งเดิมด้วยค่า “ 1 ” ทั้งใน “ เอ็กซ์ ' และ ' และ ” แกนใน “ มาตราส่วน ” เนื้อความแอนิเมชั่น
ขั้นตอนที่ 3: การใช้แอนิเมชั่นกับองค์ประกอบ HTML
ภายในส่วน CSS เลือกคลาส “ เคลื่อนไหว ” ซึ่งกำหนดให้กับ “ ” และระบุคุณสมบัติ CSS ต่อไปนี้:
ตำแหน่ง: แน่นอน;
ซ้าย: 60 %;
ความกว้าง : 110px;
ความสูง : 110px;
ขอบ: -40px 0 0 -40px;
-webkit-animation: สเกล 3s เชิงเส้นไม่สิ้นสุด;
-webkit-animation: หมุน 2s เชิงเส้นไม่สิ้นสุด;
}
คำอธิบายของคุณสมบัติที่ใช้ในบล็อกรหัสด้านบน:
- ขั้นแรก ให้ตั้งค่าของ “ แน่นอน ” ถึง CSS “ ตำแหน่ง ' คุณสมบัติ. มันสอดคล้องกับ “ img ” องค์ประกอบตามภาพเคลื่อนไหว
- จากนั้นระบุค่าของ “ 60% ”, “ 110px ' และ ' 110px ” ถึง CSS “ ซ้าย ”, “ ความกว้าง ' และ ' ความสูง ' คุณสมบัติ. คุณสมบัติเหล่านี้ใช้เพื่อกำหนดตำแหน่งและขนาดขององค์ประกอบ
- หลังจากนั้นตั้งค่าของ “ สเกล 3s เชิงเส้นไม่สิ้นสุด ” ถึง “ -webkit-ภาพเคลื่อนไหว คุณสมบัติ CSS
- และ ' 3 วินาที ” คือระยะเวลาของภาพเคลื่อนไหวนั้น ส่วน “ ไม่มีที่สิ้นสุด ” คือระยะเวลาของภาพเคลื่อนไหว และ “ เชิงเส้น ” คือทิศทางของภาพเคลื่อนไหว
- ในตอนท้าย ให้ระบุค่าของ “ หมุน 2s เชิงเส้นไม่สิ้นสุด ” ถึง CSS “ -webkit-ภาพเคลื่อนไหว ' คุณสมบัติ. คุณสมบัตินี้เพิ่มภาพเคลื่อนไหวที่สองชื่อ “ ปั่น ' บน ' img ' องค์ประกอบ.
หลังจากคอมไพล์บล็อกโค้ดด้านบนแล้ว ภาพเคลื่อนไหวจะมีลักษณะดังนี้:
gif ด้านบนแสดงให้เห็นว่ามีเพียง “ ปั่น ” ภาพเคลื่อนไหวกำลังเล่นบนองค์ประกอบเป้าหมาย
ขั้นตอนที่ 4: เล่นแอนิเมชั่นหลายรายการในองค์ประกอบ HTML
ในขั้นตอนข้างต้น มีเพียงแอนิเมชั่นเดียวเท่านั้นที่ถูกนำไปใช้กับองค์ประกอบ เนื่องจากมีการกำหนดค่าหลายค่าให้กับค่าเดียวกัน “ -webkit-ภาพเคลื่อนไหว ' คุณสมบัติ.
เพื่อแก้ไขปัญหานี้ ให้รวมองค์ประกอบเป้าหมายด้วยองค์ประกอบ HTML อื่น ในฐานะที่ “ แผนก ” ใช้เป็นตัวห่อหุ้มในขั้นตอนแรกแล้ว ให้เลือก “ ช่วง ” และอัปเดตรหัสเช่น:
.เคลื่อนไหว {ตำแหน่ง: แน่นอน;
ซ้าย: 60 %;
ความกว้าง : 110px;
ความสูง : 110px;
ขอบ:-40px 0 0 -40px;
-webkit-animation: สเกล 3s เชิงเส้นไม่สิ้นสุด;
}
. ช่วง {
ตำแหน่ง: ญาติ;
ด้านบน: 160px;
-webkit-animation: หมุน 2s เชิงเส้นไม่สิ้นสุด;
}
ในรหัสด้านบน:
- ในตอนแรก ' เคลื่อนไหว ” คลาสยังคงเหมือนเดิมและมีเพียงแอนิเมชั่นที่สองเท่านั้นที่จะถูกลบออกจากมันซึ่งอยู่ใน“ ช่วง ' ระดับ.
- หลังจากนั้นให้กำหนดตำแหน่งโดยใช้ปุ่ม “ ตำแหน่ง ' และ ' สูงสุด ' คุณสมบัติ.
หลังจากดำเนินการส่วนย่อยของโค้ดด้านบนแล้ว หน้าเว็บจะปรากฏดังนี้:
ผลลัพธ์แสดงว่ามีการใช้แอนิเมชั่นทั้งสองกับองค์ประกอบ HTML ที่เลือกพร้อมกัน
บทสรุป
หากต้องการใช้คุณสมบัติ CSS หลายรายการ ให้รวมองค์ประกอบด้วยองค์ประกอบ HTML และใช้แอนิเมชันกับองค์ประกอบเหล่านั้น เพื่อให้องค์ประกอบ HTML แต่ละรายการมีภาพเคลื่อนไหวเดียว เนื่องจากคุณสมบัติลูกสืบทอดแอนิเมชั่นที่ใช้กับองค์ประกอบ HTML หลัก ภาพเคลื่อนไหวหลายตัวจะถูกนำไปใช้โดยไม่ทำให้เกิดข้อผิดพลาดหรือความกำกวมสำหรับคอมไพเลอร์ นั่นคือขั้นตอนการเล่น/เพิ่มแอนิเมชั่น CSS มากกว่า 1 ตัวพร้อมกัน