Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Animate CSS column-rule property

CSS Web Development Front End Technology

The CSS column-rule property defines the line that appears between columns in a multi-column layout. You can animate this property to create dynamic visual effects by changing the rule's width, style, and color during the animation.

Syntax

selector {
    column-rule: width style color;
    animation: animation-name duration timing-function iteration-count;
}

Example: Animating Column Rule

The following example demonstrates how to animate the column-rule property, changing its width and color −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 600px;
        height: 300px;
        background: #f8f9fa;
        border: 2px solid #ddd;
        padding: 20px;
        column-count: 3;
        column-gap: 30px;
        column-rule: 1px solid #ccc;
        animation: ruleAnimation 3s infinite;
        font-family: Arial, sans-serif;
        text-align: justify;
    }
    
    @keyframes ruleAnimation {
        0% {
            column-rule: 1px solid #ccc;
        }
        50% {
            column-rule: 8px double #e74c3c;
        }
        100% {
            column-rule: 1px solid #ccc;
        }
    }
</style>
</head>
<body>
    <h2>Animating Column Rule Property</h2>
    <div class="container">
        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 nisi ut aliquip ex ea commodo consequat. 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.
    </div>
</body>
</html>

A white container with three columns of text appears. The column rules animate from thin gray lines to thick red double lines and back, creating a pulsing effect between the columns.

Key Points

  • The column-rule property is a shorthand for column-rule-width, column-rule-style, and column-rule-color
  • You can animate individual properties like column-rule-width separately for more control
  • The animation only works when the element has multiple columns defined using column-count or column-width

Conclusion

Animating the column-rule property allows you to create dynamic visual separators between columns. This technique is useful for highlighting content sections or creating engaging interactive layouts.

Updated on: 2026-03-15T13:27:59+05:30

292 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements