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

ตัวอย่างนี้แสดงวิธีสร้างแอนิเมชันเพื่อเปลี่ยนแปลงค่า column-width ร่วมกับคุณสมบัติอื่นๆ เช่น bottom, box-shadow, column-rule-color โดยใช้ @keyframes

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 600px;
      height: 300px;
      background: white;
      border: 10px solid red;
      animation: myanim 3s infinite;
      bottom: 30px;
      position: absolute;
      column-rule: 10px inset orange;
      column-count: 4;
      column-width: 200px;
    }
    @keyframes myanim {
      20% {
        bottom: 100px;
        box-shadow: 30px 45px 70px orange;
        column-rule-color: black;
        column-width: 150px;
      }
    }
  </style>
</head>
<body>
  <h2>การสร้างแอนิเมชันบนคุณสมบัติ column-width</h2>
  <div>
    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! This is demo text! This is demo text! 
    This is demo text!
  </div>
</body>
</html>

คำอธิบาย: เริ่มต้นคอลัมน์มีความกว้าง 200px เมื่อแอนิเมชันทำงานถึง 20% ความกว้างคอลัมน์จะลดลงเหลือ 150px ทำให้จำนวนคอลัมน์เพิ่มขึ้น (เพราะ column-count ยังคงอยู่ที่ 4 แต่พื้นที่กว้าง 600px จะรองรับคอลัมน์ได้มากขึ้น) พร้อมกับการเปลี่ยนตำแหน่ง และสีเส้นแบ่งคอลัมน์