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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนสี outline (outline-color) แยกต่างหาก

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 550px;
      height: 350px;
      outline: 2px solid blue;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      50% {
        outline-color: orange;
      }
    }
  </style>
</head>
<body>
  <h1>CSS outline-color property</h1>
  <div> </div>
</body>
</html>

คำอธิบาย: เริ่มต้น outline สีน้ำเงินหนา 2px solid ที่ 50% สีจะเปลี่ยนเป็นส้ม ความหนาและรูปแบบคงเดิม

ข้อดี: เหมือน outline properties อื่นๆ ไม่กระทบ layout GPU accelerated ได้

การประยุกต์: สร้าง focus ring ที่เปลี่ยนสี, error state animation, loading indicator