หากต้องการนำ animation ไปใช้กับคุณสมบัติ column-rule-width ใน 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-rule: 10px inset orange; column-count: 4; } @keyframes myanim { 20% { bottom: 100px; box-shadow: 30px 45px 70px orange; column-rule-color: black; column-rule-width: 20px; } } </style> </head> <body> <h2>Performing Animation on column rule width 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-count: 4) พร้อมเส้นแบ่ง (column-rule) แล้วทำ animation ที่ 20%:
- เปลี่ยน
column-rule-widthจาก 10px เป็น 20px - เปลี่ยน
column-rule-colorจากส้มเป็นดำ - เคลื่อนย้าย element ลง 100px (bottom)
- เพิ่ม box-shadow
คุณสมบัติ column-rule ที่เกี่ยวข้อง:
column-rule-width- ความกว้างเส้นแบ่งcolumn-rule-style- รูปแบบเส้น (solid, dashed, inset, ฯลฯ)column-rule-color- สีเส้นแบ่งcolumn-rule- shorthand รวมทั้ง 3 คุณสมบัติ
