หากต้องการนำ animation ไปใช้กับคุณสมบัติ column-rule (shorthand) ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้
ตัวอย่างโค้ด
<!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-count: 4; } @keyframes myanim { 20% { bottom: 100px; box-shadow: 30px 45px 70px orange; column-rule: 10px inset red; } } </style> </head> <body> <h2>Performing Animation on column rule 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! This is demo text! This is demo text! This is demo text! </div> </body> </html>
คำอธิบาย
ตัวอย่างนี้ใช้ column-rule shorthand ใน keyframe เพื่อเปลี่ยนเส้นแบ่งคอลัมน์จากไม่มี (initial) เป็น 10px inset red ที่ 20% ของ animation
ข้อควรระวัง: การ animate shorthand property เช่น column-rule อาจมีพฤติกรรมที่แตกต่างกันในแต่ละเบราว์เซอร์ เนื่องจากต้อง interpolate ค่าทุกส่วนประกอบพร้อมกัน แนะนำให้ animate คุณสมบัติย่อยแต่ละตัว (width, style, color) แยกกันเพื่อควบคุมได้ดีกว่า
