Frontend Academy · บทเรียน

แอนิเมชัน @keyframes

กำหนดแอนิเมชันหลายขั้นด้วย @keyframes ผูกเข้ากับองค์ประกอบด้วยรูปแบบย่อของ animation และควบคุมจำนวนรอบ ทิศทาง และ fill-mode

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

การเปลี่ยนผ่านกับแอนิเมชัน

การเปลี่ยนผ่านจะทำแอนิเมชันระหว่างสองสถานะเมื่อมีการเปลี่ยนแปลง ส่วนแอนิเมชัน @keyframes จะทำงานโดยอัตโนมัติ สามารถวนซ้ำ ย้อนกลับ เล่นไปเรื่อย ๆ และกำหนดขั้นตอนระดับกลางได้หลายขั้น โดยไม่จำเป็นต้องมีตัวเรียกใช้

การกำหนด @keyframes

ประกาศลำดับแอนิเมชันด้วย @keyframes กำหนดสถานะที่เปอร์เซ็นต์ต่าง ๆ เช่น 0%, 50% และ 100% หรือใช้คีย์เวิร์ด from และ to

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

รูปแบบย่อของแอนิเมชัน

animation: name duration timing-function delay iteration-count direction fill-mode ใช้รูปแบบย่อนี้กับองค์ประกอบเพื่อกำหนดแอนิเมชัน

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

กำหนดว่าแอนิเมชันจะเล่นกี่ครั้ง ค่า infinite จะวนซ้ำไปเรื่อย ๆ ส่วนตัวเลขจะทำให้เล่นตามจำนวนครั้งนั้นพอดี

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (ค่าเริ่มต้น): เล่นไปข้างหน้าในแต่ละครั้ง reverse: เล่นย้อนกลับ alternate: เล่นไปข้างหน้าแล้วถอยกลับ alternate-reverse การสลับทิศทางเหมาะอย่างยิ่งสำหรับเอฟเฟกต์เด้งกลับไปมา

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

ควบคุม state ขององค์ประกอบก่อนและหลังแอนิเมชัน forwards: องค์ประกอบจะคง state ของคีย์เฟรมสุดท้ายไว้ backwards: ใช้ state จากจุดเริ่มต้นระหว่างการหน่วง both: ใช้ทั้งสองแบบ

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

หยุดชั่วคราวและเล่นแอนิเมชันต่อด้วย JavaScript โดยสลับค่า animation-play-state: paused | running

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

แอนิเมชันหลายรายการ

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

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

แอนิเมชันเหลื่อมจังหวะด้วย animation-delay

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

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — คำแนะนำสำหรับเบราว์เซอร์

will-change: transform แจ้งเบราว์เซอร์ล่วงหน้าว่าคุณสมบัตินี้กำลังจะทำแอนิเมชัน ทำให้เบราว์เซอร์สามารถยกระดับองค์ประกอบไปไว้บนเลเยอร์สำหรับการประกอบภาพของตัวเองได้ล่วงหน้า ควรใช้เท่าที่จำเป็น เพราะเลเยอร์สำหรับการประกอบภาพที่มีมากเกินไปจะสิ้นเปลืองหน่วยความจำของ GPU

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

ภาคปฏิบัติ: หน้าจอกำลังโหลดแบบโครงร่าง

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

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

ตรวจสอบอย่างรวดเร็ว

ค่า animation-fill-mode ใดทำให้องค์ประกอบคง state ของคีย์เฟรมสุดท้ายไว้หลังแอนิเมชันสิ้นสุด

ทบทวน: แอนิเมชัน @keyframes

กำหนดด้วย @keyframes โดยใช้ from/to หรือเปอร์เซ็นต์ ใช้รูปแบบย่อของแอนิเมชันเพื่อเรียกใช้ กำหนดการวนซ้ำด้วย iteration-count ใช้ทิศทาง alternate สำหรับการเคลื่อนไหวเด้งกลับไปมา ใช้ fill-mode: forwards เพื่อคง state สุดท้าย จัดจังหวะให้เหลื่อมกันด้วย animation-delay และตัวแปร CSS และใช้คีย์เฟรมของการแปลงกับความทึบเพื่อให้ได้แอนิเมชันที่ประกอบภาพอย่างราบรื่น

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

บทเรียน “แอนิเมชัน @keyframes” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชัน @keyframes”

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

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

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

บทเรียน “แอนิเมชัน @keyframes” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Frontend Academy