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
Change column-rule-width property with CSS Animations
The CSS column-rule-width property defines the width of the vertical rule between columns in a multi-column layout. You can animate this property to create dynamic visual effects that change the column separator thickness over time.
Syntax
selector {
column-rule-width: value;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { column-rule-width: initial-value; }
to { column-rule-width: final-value; }
}
Example: Animating Column Rule Width
The following example demonstrates how to animate the column-rule-width property from 10px to 20px −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-columns {
width: 600px;
height: 300px;
background: white;
border: 2px solid #ddd;
padding: 20px;
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: #ff6b6b;
column-rule-width: 2px;
animation: ruleAnimation 3s infinite alternate;
margin: 20px auto;
}
@keyframes ruleAnimation {
0% {
column-rule-width: 2px;
column-rule-color: #ff6b6b;
}
50% {
column-rule-width: 8px;
column-rule-color: #4ecdc4;
}
100% {
column-rule-width: 15px;
column-rule-color: #45b7d1;
}
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Animating Column Rule Width</h2>
<div class="animated-columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</body>
</html>
A three-column text layout with animated vertical rules that smoothly transition in width from 2px to 15px and change color from red to teal to blue. The animation repeats infinitely with an alternating direction.
Key Points
- The
column-rule-widthproperty accepts length values like px, em, rem, and keywords like thin, medium, thick - Animation works smoothly between different width values
- Combine with
column-rule-colorandcolumn-rule-stylefor complete rule animations - Use
alternateanimation direction for back-and-forth effects
Conclusion
Animating the column-rule-width property creates engaging visual effects for multi-column layouts. This technique is useful for drawing attention to content sections or creating interactive design elements.
Updated on: 2026-03-15T13:28:15+05:30
227 Views
Advertisements