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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนการเยื้องบรรทัดแรก (text-indent) ของข้อความ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: orange;
      border: 2px solid blue;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      30% {
        text-indent: 120px;
      }
    }
  </style>
</head>
<body>
  <h1>CSS text-indent property</h1>
  <div>
    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. This is demo text.
  </div>
</body>
</html>

คำอธิบาย: เริ่มต้น text-indent = 0 (ค่าเริ่มต้น) ที่ 30% บรรทัดแรกจะเยื้องเข้าไป 120px แล้วกลับมา

การประยุกต์: สร้างเอฟเฟกต์ "typewriter" หรือเน้นย่อหน้าแรก

ข้อควรระวัง: text-indent ส่งผลเฉพาะบรรทัดแรกของ block container (หรือหลัง forced line break) การ animate อาจทำให้ข้อความดูกระพริบ ควรใช้ระยะเวลานานพอสมควร