0Pricing
CSS Academy · บทเรียน

การทำแอนิเมชันรูปทรง clip-path

สร้างแอนิเมชันเปิดเผยที่โดดเด่นด้วยการเปลี่ยนค่ารูปหลายเหลี่ยมของ clip-path

การทำแอนิเมชันรูปทรง clip-path เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

clip-path ที่สามารถทำแอนิเมชันได้

CSS สามารถเปลี่ยนผ่านและทำแอนิเมชันระหว่างค่า clip-path สองค่าได้ ตราบใดที่ทั้งสองค่าใช้ฟังก์ชันรูปร่างเดียวกันและมีอาร์กิวเมนต์จำนวนเท่ากัน การคำนวณค่าระหว่างจะทำทีละจุด

แอนิเมชันเปิดเผยแบบเลื่อน

การเปิดเผยด้วย clip-path แบบคลาสสิก โดยเนื้อหาเลื่อนเข้ามาจากด้านซ้าย:

<div class="content visible"></div>

การเปิดเผยแบบวงกลม

ขยายวงกลมจากจุดกึ่งกลางเพื่อเปิดเผยเนื้อหา:

<div class="overlay open"></div>

การแปรรูปทรง

ทำแอนิเมชันระหว่างรูปร่างรูปหลายเหลี่ยมเพื่อสร้างเอฟเฟกต์แปรรูป ทั้งสองรูปหลายเหลี่ยมต้องมีจำนวนจุดยอดเท่ากัน:

<div class="morph-shape"></div>

การทำให้จำนวนจุดยอดตรงกัน

หากต้องการทำแอนิเมชันระหว่างรูปหลายเหลี่ยมต่างรูปกัน (เช่น จากสามเหลี่ยมเป็นสี่เหลี่ยมจัตุรัส) ให้เพิ่มจุดที่อยู่ตำแหน่งเดียวกันลงในรูปร่างที่เรียบง่ายกว่า:

<div class="triangle-4pt"></div>
<div class="square-4pt"></div>

เอฟเฟกต์เปิดเผยเมื่อวางเมาส์เหนือ

รูปภาพบนการ์ดที่ถูกตัดเป็นวงกลมเมื่อวางเมาส์เหนือ:

<div class="card">
  <div class="card-img"></div>
</div>

การเปลี่ยนผ่านแบบปาด

การเปลี่ยนผ่านแบบปาดแนวทแยงสำหรับการเปลี่ยนหน้า:

<div class="page-enter"></div>

ประสิทธิภาพของแอนิเมชัน clip-path

clip-path ที่ทำแอนิเมชันจะเรียกใช้ขั้นตอนการวาดในเบราว์เซอร์ส่วนใหญ่ (ต่างจาก transform/opacity ซึ่งมีเฉพาะการประกอบเท่านั้น) สำหรับแอนิเมชันที่ซับซ้อนบนองค์ประกอบขนาดใหญ่ โปรดทดสอบประสิทธิภาพใน DevTools ก่อนนำไปใช้งานจริง

clip-path เทียบกับ mask-image สำหรับแอนิเมชัน

สำหรับความโปร่งใสแบบซับซ้อนที่มีแอนิเมชัน การใช้ mask-image กับการไล่ระดับสีที่ทำแอนิเมชันอาจมีประสิทธิภาพมากกว่า clip-path ในการเปิดเผยตามทิศทางแบบง่าย

การผ่อนจังหวะแบบสปริงด้วย clip-path

การผ่อนจังหวะแบบสปริงช่วยให้การเปิดเผยดูเป็นธรรมชาติ:

<div class="reveal"></div>

ตรวจสอบความเข้าใจ

CSS ต้องมีเงื่อนไขใดจึงจะคำนวณค่าระหว่างค่า clip-path แบบ polygon() สองค่าได้อย่างราบรื่น

สรุป

ทำแอนิเมชันระหว่างรูปร่างของ clip-path ได้โดยใช้การเปลี่ยนผ่านหรือ @keyframes การคำนวณค่าระหว่างจำเป็นต้องใช้ฟังก์ชันรูปร่างเดียวกันและมีจำนวนจุดยอดเท่ากัน ใช้ circle() สำหรับการเปิดเผยแบบขยาย ใช้ polygon() สำหรับการปาดและการแปรรูป และใช้ inset() สำหรับการเปลี่ยนผ่านการตัดรูปสี่เหลี่ยม ทำให้จำนวนจุดยอดตรงกันโดยเพิ่มจุดที่อยู่ตำแหน่งเดียวกันลงในรูปร่างที่เรียบง่ายกว่า

คำถามที่พบบ่อย

บทเรียน “การทำแอนิเมชันรูปทรง clip-path” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทำแอนิเมชันรูปทรง clip-path” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทำแอนิเมชันรูปทรง clip-path”

สร้างแอนิเมชันเปิดเผยที่โดดเด่นด้วยการเปลี่ยนค่ารูปหลายเหลี่ยมของ clip-path คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

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

บทเรียน “การทำแอนิเมชันรูปทรง clip-path” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. clip-path ด้วย polygon() และ circle()
  2. shape-outside สำหรับการตัดข้อความขึ้นบรรทัด
  3. การทำแอนิเมชันรูปทรง clip-path
  4. CSS Masks เทียบกับ Clip-path
← กลับไปที่ CSS Academy