จากการศึกษาก่อนหน้านี้ เรารู้ว่าแอนิเมชั่นการเปลี่ยนแปลงอย่างง่ายสามารถทำได้โดยใช้แอตทริบิวต์การเปลี่ยนแปลง แต่แอนิเมชั่นการเปลี่ยนแปลงสามารถระบุได้เฉพาะสถานะเริ่มต้นและสิ้นสุดเท่านั้น กระบวนการทั้งหมดถูกควบคุมโดยฟังก์ชันเฉพาะซึ่งไม่ยืดหยุ่นมากนัก ในส่วนนี้เราจะแนะนำแอนิเมชั่นที่ซับซ้อนมากขึ้น - แอนิเมชั่น
ภาพเคลื่อนไหว: เช่นเดียวกับการเปลี่ยนแปลง เอฟเฟกต์ไดนามิกบางอย่างสามารถทำได้ ความแตกต่างก็คือ การเปลี่ยนแปลงจะต้องถูกทริกเกอร์เมื่อแอตทริบิวต์บางอย่างเปลี่ยนแปลง ในขณะที่เอฟเฟกต์ภาพเคลื่อนไหวสามารถทริกเกอร์เอฟเฟกต์ไดนามิกได้โดยอัตโนมัติ หากต้องการตั้งค่าเอฟเฟ็กต์ภาพเคลื่อนไหว คุณต้องตั้งค่าคีย์เฟรมก่อน เพื่อตั้งค่าแต่ละขั้นตอนของการดำเนินการแอนิเมชัน รูปแบบของการตั้งค่าคีย์เฟรมเป็นดังนี้:
<style>/*กำหนดคีย์เฟรมภาพเคลื่อนไหว ชื่อของคีย์เฟรมคือ test*/@keyframestest{/*จาก ระบุตำแหน่งเริ่มต้นของภาพเคลื่อนไหว ซึ่งสามารถแสดงเป็น 0% ได้เช่นกัน */from{margin-left:0;}/*เพื่อระบุตำแหน่งสิ้นสุดของภาพเคลื่อนไหว ซึ่งสามารถแสดงได้ 100% */to{margin-left:100%;}}</style>แอนิเมชั่นใน CSS นั้นคล้ายคลึงกับแอนิเมชั่นแบบเฟรมต่อเฟรมใน Flash ซึ่งมีความละเอียดอ่อนและยืดหยุ่นมาก การใช้แอนิเมชั่นใน CSS สามารถแทนที่รูปภาพไดนามิก แอนิเมชั่น Flash หรือเอฟเฟกต์พิเศษที่ใช้ใน JavaScript ในหน้าเว็บจำนวนมาก
แอนิเมชั่นคือเอฟเฟกต์ของการค่อยๆ เปลี่ยนองค์ประกอบจากสไตล์หนึ่งไปอีกสไตล์หนึ่ง เราสามารถเปลี่ยนสไตล์ได้มากเท่าที่ต้องการ (คำตอบที่เป็นทางการมาก)
คุณสมบัติ CSS3animation (ภาพเคลื่อนไหว)
@คีย์เฟรม
ด้วยกฎ @keyframes เราสามารถสร้างภาพเคลื่อนไหวได้
แอนิเมชั่นถูกสร้างขึ้นโดยการค่อยๆ เปลี่ยนสไตล์ CSS หนึ่งชุดไปเป็นอีกชุดหนึ่ง เราสามารถเปลี่ยนชุดสไตล์ CSS นี้หลายครั้งในระหว่างภาพเคลื่อนไหว ระบุเวลาที่การเปลี่ยนแปลงเกิดขึ้นเป็นเปอร์เซ็นต์ หรือผ่านคีย์เวิร์ด "จาก" และ "ถึง" ซึ่งเท่ากับ 0% และ 100%
0% คือเวลาเริ่มต้นของภาพเคลื่อนไหว 100% คือเวลาสิ้นสุดของภาพเคลื่อนไหว เพื่อการรองรับเบราว์เซอร์ที่ดีที่สุด เราควรกำหนดตัวเลือก 0% และ 100% เสมอ โดยที่ 0% คือหนึ่งเฟรม 50% คือหนึ่งเฟรม และ 100% คือหนึ่งเฟรมด้วย
สุดท้าย ใช้คุณสมบัติภาพเคลื่อนไหวเพื่อควบคุมลักษณะที่ปรากฏของภาพเคลื่อนไหวและผูกภาพเคลื่อนไหวเข้ากับตัวเลือก
ต้องมีชื่อแอนิเมชั่น กำหนดชื่อของภาพเคลื่อนไหว
จำเป็นต้องมีตัวเลือกคีย์เฟรม ค่าทางกฎหมายสำหรับเปอร์เซ็นต์ของระยะเวลาภาพเคลื่อนไหว: 0-100% จาก (เหมือนกับ 0%) ถึง (เหมือนกับ 100%)
จำเป็นต้องมีรูปแบบ CSS คุณสมบัติสไตล์ CSS ทางกฎหมายอย่างน้อยหนึ่งรายการ
ตัวอย่างเช่น:
@keyframesname{0%{top:0px;left:0px;พื้นหลัง:red;}25%{top:0px;left:100px;พื้นหลัง:สีน้ำเงิน;}50%{top:100px;le ฟุต:100px;พื้นหลัง:สีเหลือง;}75%{ด้านบน:100px;ซ้าย:0px;พื้นหลัง:สีเขียว;}100%{ด้านบน:0px;ซ้าย:0px;พื้นหลัง:สีแดง;}}1. คุณลักษณะชื่อภาพเคลื่อนไหว: ตั้งชื่อภาพเคลื่อนไหวที่ต้องเชื่อมโยงกับองค์ประกอบ
แอ็ตทริบิวต์ชื่อภาพเคลื่อนไหวใช้เพื่อผูกแอนิเมชั่นกับองค์ประกอบ HTML ที่ระบุ ค่าทางเลือกของแอททริบิวต์มีดังนี้:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{บน:200px;ซ้าย:0px;}100%{บน:0px;ซ้าย :0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;}</style></head><body><div ></div></body></html>ผลการวิ่ง:
หมายเหตุ: เพื่อให้ภาพเคลื่อนไหวเล่นได้สำเร็จ คุณต้องกำหนดแอตทริบิวต์ Animation-duration ด้วย มิฉะนั้น ภาพเคลื่อนไหวจะไม่เล่นเนื่องจากค่าเริ่มต้นของแอตทริบิวต์ Animation-duration คือ 0
2. คุณลักษณะแอนิเมชั่น-ระยะเวลา: กำหนดจำนวนวินาทีหรือมิลลิวินาทีที่แอนิเมชั่นจะเสร็จสมบูรณ์หนึ่งรอบ
● เวลา: ระบุเวลาที่ใช้ในการทำให้ภาพเคลื่อนไหวเสร็จสมบูรณ์ ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าไม่มีเอฟเฟกต์ภาพเคลื่อนไหว
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left :350px;}50%{บน:200px;ซ้าย:350px;}75%{บน:200px;ซ้าย:0px;}100%{บน:0px;ซ้าย:0px;}}div{ width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;animation-duration:2s;}</style></head><body><div> </div></body></html>3. ฟังก์ชั่นแอนิเมชั่น-ไทม์มิ่ง: ฟังก์ชันทางคณิตศาสตร์ที่ใช้เรียกว่าเส้นโค้งลูกบาศก์เบซิเยร์และเส้นโค้งความเร็ว เมื่อใช้ฟังก์ชันนี้ คุณสามารถใช้ค่าของคุณเอง หรือใช้ค่าใดค่าหนึ่งที่กำหนดไว้ล่วงหน้าได้
●เชิงเส้น: ความเร็วของภาพเคลื่อนไหวจะเท่ากันตั้งแต่ต้นจนจบ
●ความง่าย: ค่าเริ่มต้น แอนิเมชันเริ่มต่ำ จากนั้นเร็วขึ้น และช้าลงก่อนสิ้นสุด
● การค่อยๆ เปลี่ยน: แอนิเมชั่นเริ่มต้นที่ความเร็วต่ำ
● การค่อยๆ คลาย: แอนิเมชั่นจบลงที่ความเร็วต่ำ
●การค่อยๆ เข้า-ออก: แอนิเมชั่นเริ่มต้นและสิ้นสุดด้วยความเร็วต่ำ
●cubic-bezier (n,n,n,n): ใช้ฟังก์ชัน cube-bezier() เพื่อกำหนดความเร็วในการเล่นภาพเคลื่อนไหว ช่วงค่าของพารามิเตอร์คือค่าระหว่าง 0 ถึง 1
4. คุณลักษณะภาพเคลื่อนไหวล่าช้า: กำหนดเมื่อภาพเคลื่อนไหวเริ่มต้น
●เวลา: ไม่บังคับ กำหนดเวลาเป็นวินาทีหรือมิลลิวินาทีเพื่อรอก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น ค่าเริ่มต้นคือ 0
หมายเหตุ: หน่วยอาจเป็นวินาที (s) หรือมิลลิวินาที (ms)
5. แอ็ตทริบิวต์ Animation-iteration-count: กำหนดจำนวนครั้งที่ควรเล่นแอนิเมชั่น
ค่าทางเลือกสำหรับแอตทริบิวต์มีดังนี้:
6. คุณลักษณะแอนิเมชั่นทิศทาง: กำหนดว่าจะเล่นแอนิเมชั่นแบบย้อนกลับในลูปหรือไม่
●ปกติ: ค่าเริ่มต้น แอนิเมชั่นจะเล่นได้ตามปกติ
●ย้อนกลับ: แอนิเมชั่นเล่นย้อนกลับ;
●ทางเลือก: ภาพเคลื่อนไหวจะเล่นไปข้างหน้าเป็นเลขคี่ (1, 2, 5...) และย้อนกลับเป็นเลขคู่ (2, 4, 6...)
●สลับ-ย้อนกลับ: แอนิเมชั่นจะเล่นในทิศทางย้อนกลับในเวลาที่เป็นเลขคี่ (1, 3, 5...) และในทิศทางไปข้างหน้าในเวลาที่เป็นเลขคู่ (2, 4, 6...)
7. แอ็ตทริบิวต์ Animation-fill-mode: ระบุสไตล์ที่จะใช้กับองค์ประกอบเมื่อภาพเคลื่อนไหวไม่เล่น (เมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ หรือเมื่อภาพเคลื่อนไหวมีความล่าช้าก่อนที่จะเริ่มเล่น)
หมายเหตุ: ตามค่าเริ่มต้น ภาพเคลื่อนไหว CSS จะไม่ส่งผลกระทบต่อองค์ประกอบจนกว่าคีย์เฟรมแรกจะเล่น และหยุดส่งผลกระทบต่อองค์ประกอบหลังจากคีย์เฟรมสุดท้ายเสร็จสิ้น คุณสมบัติโหมดเติมภาพเคลื่อนไหวจะแทนที่ลักษณะการทำงานนี้
●ไม่มีค่าเริ่มต้น : ภาพเคลื่อนไหวจะไม่ใช้สไตล์ใดๆ กับองค์ประกอบเป้าหมายก่อนและหลังการดำเนินการภาพเคลื่อนไหว
●ไปข้างหน้า: หลังจากที่ภาพเคลื่อนไหวจบลง (พิจารณาจากจำนวนภาพเคลื่อนไหวซ้ำ) ภาพเคลื่อนไหวจะใช้ค่าแอตทริบิวต์นี้
●ย้อนกลับ: ภาพเคลื่อนไหวจะใช้ค่าคุณสมบัติที่กำหนดไว้ในคีย์เฟรมที่เริ่มต้นการวนซ้ำครั้งแรกของภาพเคลื่อนไหวระหว่างคำจำกัดความความล่าช้าของภาพเคลื่อนไหว ค่าเหล่านี้เป็นค่าในคีย์เฟรมจาก (เมื่อทิศทางของภาพเคลื่อนไหวเป็น "ปกติ" หรือ "สำรอง") หรือในคีย์เฟรมถึง (เมื่อทิศทางของภาพเคลื่อนไหวเป็น "ย้อนกลับ" หรือ "สลับย้อนกลับ");
●แอนิเมชั่นทั้งสองเป็นไปตามกฎการเดินหน้าและถอยหลัง นั่นคือภาพเคลื่อนไหวจะขยายคุณสมบัติของภาพเคลื่อนไหวทั้งสองทิศทาง
8.animation-play-state: ระบุว่าภาพเคลื่อนไหวกำลังทำงานหรือหยุดชั่วคราว
●paused: กำหนดให้หยุดภาพเคลื่อนไหวชั่วคราว;
●วิ่ง: ระบุภาพเคลื่อนไหวที่กำลังวิ่ง
9. เริ่มต้น: ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น
●initial: คีย์เวิร์ดใช้เพื่อตั้งค่าคุณสมบัติ CSS เป็นค่าเริ่มต้น
●initial: สามารถใช้คีย์เวิร์ดกับแอตทริบิวต์ CSS ใดก็ได้ในองค์ประกอบ HTML ใดก็ได้
10. สืบทอด: สืบทอดคุณลักษณะจากองค์ประกอบหลัก
●สืบทอด: คีย์เวิร์ดระบุว่าแอตทริบิวต์ควรสืบทอดค่าจากองค์ประกอบหลัก
●สืบทอด: สามารถใช้คีย์เวิร์ดกับแอตทริบิวต์ CSS ใดก็ได้ในองค์ประกอบ HTML ใดก็ได้
แอนิเมชั่น
แอ็ตทริบิวต์แอนิเมชันเป็นตัวย่อของชื่อแอนิเมชั่น, แอนิเมชั่น-ระยะเวลา, แอนิเมชั่น-เวลา-ฟังก์ชัน, แอนิเมชั่น-ดีเลย์, แอนิเมชั่น-วนซ้ำ-นับ, แอนิเมชั่น-ทิศทาง, แอนิเมชั่น-โหมดเติม, แอนิเมชั่น-เล่น-สถานะผ่านแอนิเมชั่น คุณลักษณะสามารถกำหนดคุณลักษณะข้างต้นได้หลายรายการพร้อมกัน รูปแบบไวยากรณ์เป็นดังนี้:
แอนิเมชั่น: แอนิเมชั่น - ชื่อแอนิเมชั่น - ระยะเวลาแอนิเมชั่น - เวลา - ฟังก์ชั่นแอนิเมชั่น - ความล่าช้านิเมชั่น - การวนซ้ำ - การนับแอนิเมชั่น - ทิศทางแอนิเมชั่น - เติมโหมดแอนิเมชั่น - เล่น - สถานะ;
พารามิเตอร์แต่ละตัวสอดคล้องกับแต่ละแอตทริบิวต์ที่แนะนำข้างต้น หากละเว้นค่าหนึ่งค่าขึ้นไป ระบบจะใช้ค่าเริ่มต้นที่สอดคล้องกับแอตทริบิวต์นั้น
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>ภาพเคลื่อนไหว</title><style>.box1{width:700px;height:500px;พื้นหลัง-สี:silver;} box2{width:100px;height:100px;สีพื้นหลัง:#bfa;margin-left:10px;/*animat-name:test;*//*animat-duration:4s;*//*animat ฟังก์ชั่นเวลาไอออน: เชิงเส้น; * // * แอนิเมชั่น - การวนซ้ำ - นับ: 4; * // * แอนิเมชั่น - ทิศทาง: ทางเลือก; * // * แอนิเมชั่น - เติมโหมด: ย้อนกลับ ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*กำหนดคีย์เฟรมภาพเคลื่อนไหว ชื่อของคีย์เฟรมคือ test*/@keyframestest{/*จาก ระบุตำแหน่งเริ่มต้นของภาพเคลื่อนไหว คุณ นอกจากนี้ยังสามารถใช้ 0% ในการแสดงออกได้ */from{margin-left:50px;พื้นหลัง-สี:orange;}/*เพื่อระบุตำแหน่งสิ้นสุดของภาพเคลื่อนไหว ซึ่งสามารถแสดงได้ 100% เช่นกัน */to{margin-left:600px;พื้นหลัง-สี:สีเหลือง;}}/*ควบคุมการทำงานของแอนิเมชั่น*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>