การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS letter-spacing

สามารถสร้างแอนิเมชันให้กับคุณสมบัติ letter-spacing (ระยะห่างระหว่างตัวอักษร) ได้อย่างราบรื่นด้วย @keyframes

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      letter-spacing: 3px;
      animation: mymove 3s infinite;
    }
    @keyframes mymove {
      70% {
        letter-spacing: 20px;
      }
    }
  </style>
</head>
<body>
  <p>I am flying!</p>
</body>
</html>

คำอธิบาย: ข้อความเริ่มต้นมีระยะห่าง 3px เมื่อแอนิเมชันทำงานถึง 70% ระยะห่างจะขยายเป็น 20px ทำให้ดูเหมือนตัวอักษรกระจายตัวออกไป (flying effect) แล้วกลับมาอีกครั้ง

การประยุกต์ใช้: เหมาะสำหรับเอฟเฟกต์ hover, loading text, หรือการเน้นข้อความสำคัญ ควรใช้ค่าที่ไม่ทำให้ข้อความอ่านยากเกินไป

ประสิทธิภาพ: การ animate letter-spacing มีต้นทุนต่ำ (cheap) เพราะไม่ทำให้เกิด layout reflow ใหญ่โตเหมือน width/height