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

คุณสมบัติ font (shorthand) สามารถนำไปใช้ในแอนิเมชันได้ แต่ต้องระวังว่าเป็น shorthand ของหลายคุณสมบัติ (font-style, font-variant, font-weight, font-size, line-height, font-family) การ animate shorthand อาจให้ผลลัพธ์ที่คาดการณ์ยาก

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

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      border: 2px solid black;
      width: 400px;
      height: 100px;
      animation: myanim 5s infinite;
    }
    @keyframes myanim {
      70% {
        font: 35px arial, sans-serif;
      }
    }
  </style>
</head>
<body>
  <p>This is demo text</p>
</body>
</html>

คำแนะนำ: แทนที่จะ animate font shorthand ควร animate คุณสมบัติย่อยแยกกัน เช่น font-size, font-weight, line-height เพื่อควบคุมได้ชัดเจนกว่า และประสิทธิภาพดีกว่า

ตัวอย่างที่ดีกว่า:

@keyframes betterAnim {
  70% {
    font-size: 35px;
    font-family: arial, sans-serif;
    font-weight: bold;
  }
}