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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      position: absolute;
      right: 0;
      width: 300px;
      height: 200px;
      background-color: blue;
      text-decoration: underline;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      30% {
        right: 350px;
        text-decoration-color: orange;
      }
    }
  </style>
</head>
<body>
  <h1>CSS text-decoration-color property</h1>
  <div id="demo">
    <h1>This is demo text.</h1>
  </div>
</body>
</html>

คำอธิบาย: ข้อความมี underline เริ่มต้นสีเดียวกับข้อความ (สีขาวบนพื้นฟ้า) ที่ 30% ขณะกล่องเลื่อนซ้าย (right: 350px) สี underline จะเปลี่ยนเป็นส้ม

คุณสมบัติ text-decoration ที่เกี่ยวข้อง:

• text-decoration-line: underline, overline, line-through, blink
• text-decoration-style: solid, double, dotted, dashed, wavy
• text-decoration-color: สีของเส้น
• text-decoration-thickness: ความหนา (ใหม่)
• Shorthand: text-decoration

ข้อดี: การ animate text-decoration-color ไม่กระทบ layout และราบรื่น