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

ตัวอย่างนี้แสดงการสร้างแอนิเมชันเปลี่ยนสีเส้นแบ่งคอลัมน์ (column-rule-color) ร่วมกับการเปลี่ยนตำแหน่งและ box-shadow

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

<!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;
      }
    }
  </style>
</head>
<body>
  <h2>Performing Animation on column rule color property</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>

คำอธิบาย: เริ่มต้นเส้นแบ่งคอลัมน์เป็นสีส้ม (column-rule: 10px inset orange) ที่ 20% จะเปลี่ยนเป็นสีดำ (column-rule-color: black) การใช้ inset ทำให้เส้นแบ่งมีเอฟเฟกต์ 3D แบบเข้าไปใน

คุณสมบัติ column-rule ที่เกี่ยวข้อง: column-rule-width, column-rule-style, column-rule-color และ shorthand column-rule