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

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

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

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

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

ค่าของ outline-width: thin, medium, thick, หรือค่าความยาว (px, em, rem)

ข้อดี: เหมือน outline ทั่วไป ไม่กระทบ layout สามารถ animate ได้ราบรื่น