Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animate CSS column-rule-color property
The CSS column-rule-color property defines the color of the rule (line) between columns in a multi-column layout. You can animate this property to create dynamic visual effects where the column divider changes color over time.
Syntax
selector {
column-rule-color: color;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { column-rule-color: initial-color; }
to { column-rule-color: final-color; }
}
Example
The following example demonstrates animating the column-rule-color property from orange to black −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-columns {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
column-count: 4;
column-rule: 10px inset orange;
animation: colorChange 3s infinite;
position: absolute;
bottom: 30px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
}
@keyframes colorChange {
0% {
column-rule-color: orange;
bottom: 30px;
}
20% {
column-rule-color: black;
bottom: 100px;
box-shadow: 30px 45px 70px orange;
}
100% {
column-rule-color: orange;
bottom: 30px;
}
}
</style>
</head>
<body>
<h2>Animating Column Rule Color Property</h2>
<div class="animated-columns">
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! This is demo text! This is demo text!
</div>
</body>
</html>
A multi-column text container with a red border appears. The vertical rules between columns animate from orange to black and back to orange continuously over 3 seconds. The container also moves vertically and gains a shadow effect during the animation.
Conclusion
Animating the column-rule-color property allows you to create dynamic visual effects in multi-column layouts. This technique is useful for drawing attention to content divisions or creating engaging interactive designs.
Updated on: 2026-03-15T13:32:09+05:30
285 Views
Advertisements