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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      overflow: auto;
      width: 50%;
      background-color: blue;
      color: white;
      border: 1px solid black;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      30% {
        min-width: 550px;
      }
    }
  </style>
</head>
<body>
  <h1>Example of min-width</h1>
  <div>
    <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
  </div>
</body>
</html>

คำอธิบาย: กล่องมี width: 50% (ขึ้นอยู่กับ container) และ min-width เริ่มต้นเป็น 0 (หรือ auto) ที่ 30% min-width จะกลายเป็น 550px ทำให้กล่องขยายกว้างขึ้นหาก container กว้างพอ หรือแสดง scrollbar (overflow: auto) หาก container แคบกว่า

การประยุกต์: ใช้สำหรับ responsive design ที่ต้องการให้ element มีขนาดขั้นต่ำแตกต่างกันในแต่ละ breakpoint แบบ animated

ประสิทธิภาพ: การ animate min-width/width ก่อให้เกิด reflow ควรพิจารณา transform: scaleX() แทน