เครื่องมือสร้าง Keyframes CSS

สี่พรีเซ็ต

เฟดสไลด์

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

องค์ประกอบค่อยๆ ปรากฏพร้อมเลื่อนขึ้นจากด้านล่าง

พัลส์

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

เอฟเฟกต์หายใจเบาๆ เหมาะกับจุดแจ้งเตือนและป้ายสัญลักษณ์

หมุน

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

หมุนครบรอบ เหมาะกับตัวโหลดและไอคอน

เด้ง

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

องค์ประกอบเด้งขึ้นแล้วกลับลงมา

ทำไมต้อง transform และ opacity?

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

รูปแบบย่อ animation

animation: fade-slide 0.6s ease both; อ่านว่า: แอนิเมชันชื่อ fade-slide ยาว 0.6 วินาที ใช้ easing ease ตามค่าเริ่มต้น โหมดเติมเต็ม both ใช้สถานะเริ่มต้นก่อนแอนิเมชันเริ่ม และคงสถานะสุดท้ายหลังจบ เพื่อไม่ให้องค์ประกอบกะพริบก่อนหรือดีดกลับอย่างกระตุกหลังเคลื่อนที่

หลักการตั้งชื่อ

• ใช้ kebab-case ตามหลักการของ CSS
• อธิบายการเคลื่อนไหว ไม่ใช่ตัวองค์ประกอบ: fade-in-up ดีกว่า alert-appear
• หลีกเลี่ยงชื่อที่อาจชนกับไลบรารีของบุคคลที่สาม

การรองรับเบราว์เซอร์

@keyframes เป็นฟีเจอร์สากล รองรับทุกเบราว์เซอร์ตั้งแต่ IE 10