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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนความสูงบรรทัด (line-height) ของพารากราฟ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      animation: mymove 3s infinite;
      line-height: 20px;
    }
    @keyframes mymove {
      70% {
        line-height: 50px;
      }
    }
  </style>
</head>
<body>
  <p>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</p>
</body>
</html>

คำอธิบาย: ข้อความเริ่มต้นมี line-height 20px ที่ 70% จะขยายเป็น 50px ทำให้บรรทัดขยายห่างกัน แล้วหดกลับมา

การประยุกต์ใช้: สร้างเอฟเฟกต์ "breathing text" หรือเน้นการอ่านบรรทัดเฉพาะ

ข้อควรระวัง: การ animate line-height อาจทำให้เกิด layout shift ของเนื้อหาต่อไป ควรใช้ใน container ที่มีพื้นที่เพียงพอ หรือใช้ transform: scaleY() บน pseudo-element แทนเพื่อหลีกเลี่ยง reflow