ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน
ควบคุมทิศทางการเล่นแอนิเมชัน จำนวนรอบที่เล่นซ้ำ และสถานะสุดท้ายด้วย fill-mode
ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณสมบัติจำนวนรอบของแอนิเมชัน
ควบคุมจำนวนครั้งที่แอนิเมชันเล่นซ้ำ ใช้ infinite เพื่อวนซ้ำอย่างต่อเนื่อง
<div class="spinner"></div>
<div class="pulse"></div>
ทิศทางของแอนิเมชัน
ควบคุมทิศทางการเล่นในรอบที่สลับกัน:
normal— เล่นไปข้างหน้าในทุกรอบreverse— เล่นย้อนกลับalternate— เล่นไปข้างหน้าแล้วถอยกลับ โดยสลับทิศทางalternate-reverse— เล่นย้อนกลับแล้วไปข้างหน้า
<div class="bounce"></div>
คุณสมบัติโหมดเติมของแอนิเมชัน
กำหนดสิ่งที่จะเกิดขึ้นกับองค์ประกอบ ก่อน แอนิเมชันเริ่มและ หลังจากแอนิเมชันจบ:
none— ค่าเริ่มต้น ย้อนกลับไปยังสถานะเดิมforwards— คงคีย์เฟรมสุดท้ายไว้หลังเล่นจบbackwards— ใช้คีย์เฟรมแรกระหว่างความหน่วงboth— ใช้ทั้งแบบย้อนหลังและไปข้างหน้า
โหมดเติมแบบคงเฟรมสุดท้าย
กรณีใช้งานที่พบบ่อยที่สุด คือคงองค์ประกอบไว้ในสถานะสุดท้ายของแอนิเมชันหลังแอนิเมชันเสร็จสิ้น:
<p class="item">I fade in and stay visible</p>
โหมดเติมแบบใช้เฟรมแรกระหว่างความหน่วง
เมื่อมีความหน่วง backwards จะทำให้องค์ประกอบเริ่มต้นที่สถานะของคีย์เฟรมแรกระหว่างช่วงความหน่วง ป้องกันไม่ให้สถานะเดิมกะพริบก่อนแอนิเมชันเริ่ม:
<p class="item">Starts invisible during the delay</p>
โหมดเติมแบบใช้ทั้งสองทิศทาง
both รวมแบบไปข้างหน้าและย้อนหลังเข้าด้วยกัน เป็นตัวเลือกที่คาดเดาได้มากที่สุดสำหรับองค์ประกอบที่ทำแอนิเมชันและไม่ควรกะพริบก่อนหรือหลังแอนิเมชัน
คุณสมบัติความหน่วงของแอนิเมชัน
หน่วงการเริ่มต้นของแอนิเมชัน ความหน่วงติดลบทำให้แอนิเมชันเริ่มจากช่วงกลางของการเล่น ซึ่งมีประโยชน์สำหรับการทำให้แอนิเมชันหลายรายการทำงานสอดคล้องกัน:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
รูปแบบแอนิเมชันแบบทยอย
การทำแอนิเมชันแบบทยอยด้วย CSS เพียงอย่างเดียว โดยใช้ความหน่วงตามลำดับลูก:
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
การหยุดชั่วคราวและเล่นต่อ
สลับสถานะแอนิเมชันด้วย JavaScript โดยเปลี่ยน animation-play-state:
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
การรีเซ็ตแอนิเมชัน
หากต้องการเล่นแอนิเมชัน CSS ซ้ำ ให้ใช้ remove แล้ว add คลาสอีกครั้ง เบราว์เซอร์ใช้เทคนิคหนึ่งโดยบังคับให้เกิดการจัดวางใหม่ระหว่างการลบและการเพิ่ม:
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
ความหน่วงแอนิเมชันเป็นค่าลบ
เริ่มแอนิเมชันจากช่วงกลางของการเล่นโดยใช้ความหน่วงติดลบ ซึ่งมีประโยชน์สำหรับรูปแบบพื้นหลังที่ทำงานสอดคล้องกัน หรือองค์ประกอบที่วนซ้ำและควรดูเหมือนกำลังเคลื่อนไหวอยู่แล้ว
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
ตรวจสอบอย่างรวดเร็ว
ค่าใดของ animation-fill-mode ที่ทำให้องค์ประกอบคงอยู่ในสถานะคีย์เฟรมสุดท้ายหลังแอนิเมชันจบ
ทบทวน
animation-iteration-count: infinite ทำให้แอนิเมชันวนซ้ำตลอดไป animation-direction: alternate ทำให้เล่นสลับไปกลับ animation-fill-mode: forwards คงสถานะสุดท้ายไว้ animation-fill-mode: both เป็นตัวเลือกที่ปลอดภัยที่สุด ใช้ความหน่วงติดลบเพื่อเลื่อนจังหวะของแอนิเมชันที่ทำงานสอดคล้องกัน
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน”
ควบคุมทิศทางการเล่นแอนิเมชัน จำนวนรอบที่เล่นซ้ำ และสถานะสุดท้ายด้วย fill-mode คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์ @keyframes และคุณสมบัติแอนิเมชัน
- ทิศทาง โหมดเติม และจำนวนรอบของแอนิเมชัน
- การเชื่อมต่อและจัดลำดับแอนิเมชัน
- แอนิเมชันที่เข้าถึงได้ด้วย prefers-reduced-motion