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

ตัวอย่างการสร้างแอนิเมชันเปลี่ยน outline (เส้นขอบนอก) ของ element รวมถึงความกว้าง รูปแบบ และสี

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

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

คำอธิบาย: เริ่มต้น outline สีน้ำเงินบาง 1px solid ที่ 50% จะกลายเป็นสีส้มหนา 10px dashed (ประจำ) outline ไม่ส่งผลต่อ box model (ไม่นับใน width/height) และไม่ทำให้เกิด reflow ของ element อื่น

ข้อดีของ outline:

• ไม่กระทบ layout (no reflow)
• สามารถเป็นรูปทรงไม่ใช่สี่เหลี่ยมได้ (follow border-radius)
• ใช้สำหรับ focus indicator, highlight, debug layout

การประยุกต์: สร้างเอฟเฟกต์ highlight, focus ring animation, loading indicator