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

สามารถนำการเคลื่อนไหวไปใช้กับคุณสมบัติ columns (รวมถึง column-count, column-width, column-rule เป็นต้น) ได้โดยใช้ @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;
    }
    @keyframes myanim {
      20% {
        bottom: 100px;
        box-shadow: 30px 45px 70px orange;
        column-rule-color: black;
        columns: 70px 6;  /* column-width 70px, column-count 6 */
      }
    }
  </style>
</head>
<body>
  <h2>การสร้างแอนิเมชันบนคุณสมบัติ column-rule-color</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>

หมายเหตุ: คุณสมบัติ columns เป็น shorthand ของ column-width และ column-count การเปลี่ยนแปลงทั้งสองค่าพร้อมกันในแอนิเมชันอาจทำให้การแสดงผลมีการกระโดด (jank) บนบราวเซอร์บางตัว ควรทดสอบความราบรื่นก่อนนำไปใช้งานจริง