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

คุณสมบัติ outline-offset ใช้กำหนดระยะห่างระหว่าง outline กับ border (หรือขอบของ element) การ animate คุณสมบัตินี้สร้างเอฟเฟกต์ outline "ลอย" ไปไกลจาก element

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

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

คำอธิบาย: เริ่มต้น outline ติดกับขอบ element (outline-offset: 0 default) ที่ 50% outline จะลอยออกไป 50px จากขอบ ทำให้เห็นช่องว่างระหว่าง element กับ outline

ค่าที่ใช้ได้: <length> (px, em, rem) ค่าลบได้ (outline เข้ามาใน element)

การประยุกต์: สร้างเอฟเฟกต์ focus ring ที่ขยายออกไป (expanding focus ring), ripple effect, radar/scan animation

ข้อดี: ไม่กระทบ layout (outline อยู่ภายนอก box model) GPU accelerated ได้