การสร้าง Animation ด้วย CSS Keyframes

การสร้าง Animation ด้วย CSS Keyframes

จากบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการสร้าง Animation แบบง่ายๆ ด้วย CSS Transitions ซึ่งเหมาะสำหรับการเปลี่ยนแปลงค่า CSS properties แบบราบรื่นและตรงไปตรงมา แต่ถ้าเราต้องการสร้าง Animation ที่ซับซ้อนกว่านั้น เช่น การเปลี่ยนแปลงหลายขั้นตอน หรือการควบคุมการเคลื่อนไหวที่ละเอียดกว่า Transitions จะไม่เพียงพอ ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับการสร้าง Animation ที่ซับซ้อนยิ่งขึ้นด้วย CSS Keyframes

Keyframes คืออะไร?

Keyframes คือจุดสำคัญใน Animation ที่กำหนดค่า CSS properties ที่จุดเวลาต่างๆ Animation จะค่อยๆ เปลี่ยนจาก Keyframe หนึ่งไปยังอีก Keyframe หนึ่ง ทำให้เราสามารถควบคุมการเปลี่ยนแปลงขององค์ประกอบได้อย่างละเอียด

การใช้งาน @keyframes

ในการสร้าง Animation ด้วย Keyframes เราต้องเริ่มต้นด้วยการกำหนด Keyframes โดยใช้กฎ @keyframes ตามด้วยชื่อของ Animation ที่เราต้องการสร้าง

@keyframes myAnimation {
  /* Keyframes จะถูกกำหนดไว้ในนี้ */
}

ภายใน @keyframes เราสามารถกำหนด Keyframes ได้หลายรูปแบบ ที่พบบ่อยที่สุดคือการใช้ from และ to หรือการใช้เปอร์เซ็นต์ (0%, 50%, 100%)

from และ to

from และ to เป็น Keyframes ที่ง่ายที่สุด โดย from หมายถึงจุดเริ่มต้นของ Animation และ to หมายถึงจุดสิ้นสุดของ Animation

@keyframes fadeInOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ตัวอย่างนี้สร้าง Animation ชื่อ fadeInOut ที่ทำให้องค์ประกอบค่อยๆ ปรากฏขึ้น (fade in) จากความโปร่งใส 0 (มองไม่เห็น) ไปเป็นความโปร่งใส 1 (มองเห็นได้ชัดเจน)

ในการใช้งาน Animation นี้กับองค์ประกอบ HTML เราต้องใช้ CSS property animation-name และ animation-duration

.element {
  animation-name: fadeInOut;
  animation-duration: 2s; /* 2 วินาที */
}

โค้ดนี้จะนำ Animation fadeInOut ไปใช้กับองค์ประกอบที่มี class .element โดยใช้เวลา 2 วินาทีในการเล่น Animation

0%, 50%, 100%

การใช้เปอร์เซ็นต์ (0%, 50%, 100%) ช่วยให้เราสามารถกำหนด Keyframes ที่จุดเวลาต่างๆ ใน Animation ได้อย่างละเอียดมากขึ้น โดย 0% หมายถึงจุดเริ่มต้นของ Animation, 100% หมายถึงจุดสิ้นสุดของ Animation และ 50% หมายถึงจุดกึ่งกลางของ Animation เราสามารถเพิ่ม Keyframes ที่เปอร์เซ็นต์อื่นๆ ได้ตามต้องการ

@keyframes moveAndRotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}

ตัวอย่างนี้สร้าง Animation ชื่อ moveAndRotate ที่ทำให้องค์ประกอบเคลื่อนที่ไปทางขวา 100 พิกเซลและหมุน 180 องศาที่จุดกึ่งกลางของ Animation จากนั้นกลับมาที่ตำแหน่งเดิมและหมุน 360 องศาที่จุดสิ้นสุดของ Animation

ในการใช้งาน Animation นี้กับองค์ประกอบ HTML เราต้องใช้ CSS property animation-name และ animation-duration เช่นเดียวกับตัวอย่างก่อนหน้า

.element {
  animation-name: moveAndRotate;
  animation-duration: 3s; /* 3 วินาที */
}

โค้ดนี้จะนำ Animation moveAndRotate ไปใช้กับองค์ประกอบที่มี class .element โดยใช้เวลา 3 วินาทีในการเล่น Animation

ตัวอย่างการใช้งาน CSS Keyframes

ลองมาดูตัวอย่างการสร้าง Animation ที่ซับซ้อนขึ้นด้วย CSS Keyframes กัน

<div class="square"></div>

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: colorChangeAndMove;
  animation-duration: 4s;
  animation-iteration-count: infinite; /* เล่นซ้ำตลอดเวลา */
  animation-direction: alternate; /* เล่นไปข้างหน้าและย้อนกลับ */
}

@keyframes colorChangeAndMove {
  0% {
    background-color: red;
    left: 0;
    top: 0;
  }
  25% {
    background-color: blue;
    left: 200px;
    top: 0;
  }
  50% {
    background-color: green;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: yellow;
    left: 0;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0;
    top: 0;
  }
}

โค้ดนี้จะสร้างสี่เหลี่ยมจัตุรัสสีแดงที่เคลื่อนที่ไปตามเส้นทางสี่เหลี่ยมและเปลี่ยนสีไปตามจุดต่างๆ ใน Animation

• animation-iteration-count: infinite; ทำให้ Animation เล่นซ้ำตลอดเวลา
• animation-direction: alternate; ทำให้ Animation เล่นไปข้างหน้าและย้อนกลับสลับกันไป

Trade-offs และแนวปฏิบัติที่ดี

• ประสิทธิภาพ: Animation ที่ซับซ้อนเกินไปอาจส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ โดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือ ควรทดสอบประสิทธิภาพอย่างสม่ำเสมอและพิจารณาใช้เทคนิค optimization ที่เหมาะสม
• ความชัดเจน: การใช้ Keyframes จำนวนมากเกินไปอาจทำให้โค้ดเข้าใจยาก ควรพยายามแบ่ง Animation ออกเป็นส่วนย่อยๆ และใช้ชื่อ Keyframes ที่สื่อความหมาย
• การเข้าถึง: Animation ที่เร็วเกินไปหรือมีแสงกระพริบอาจรบกวนผู้ใช้บางราย ควรคำนึงถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นและปรับ Animation ให้เหมาะสม
• Fallback: สำหรับเบราว์เซอร์ที่ไม่รองรับ CSS Animation ควรมี fallback ที่เหมาะสม เช่น การแสดงผลแบบ static หรือการใช้ JavaScript Animation

สรุป

CSS Keyframes เป็นเครื่องมือที่ทรงพลังสำหรับการสร้าง Animation ที่ซับซ้อนและควบคุมการเคลื่อนไหวได้อย่างละเอียด การใช้ @keyframes, from, to, และเปอร์เซ็นต์ (0%, 50%, 100%) ช่วยให้เราสามารถสร้าง Animation ที่น่าสนใจและดึงดูดสายตาได้ แต่ควรคำนึงถึงประสิทธิภาพ, ความชัดเจน, การเข้าถึง, และ fallback เพื่อให้ Animation ทำงานได้อย่างราบรื่นและเป็นมิตรกับผู้ใช้ทุกคน

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน CSS Variables (Custom Properties) ซึ่งเป็นคุณสมบัติที่ช่วยให้เราจัดการและปรับแต่ง CSS ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น