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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      overflow: auto;
      width: 350px;
      background-color: blue;
      color: white;
      border: 1px solid black;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      30% {
        min-height: 250px;
      }
    }
  </style>
</head>
<body>
  <h1>Example of min-height</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>

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

ประสิทธิภาพ: เหมือน min-width การ animate min-height ก่อให้เกิด reflow