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

Change CSS columns property with Animation

CSS Web Development Front End Technology

The CSS columns property can be animated to create dynamic multi-column layouts. This property is a shorthand for column-width and column-count, allowing you to animate column changes smoothly.

Syntax

selector {
    columns: column-width column-count;
    animation: animation-name duration timing-function;
}

Example: Animating Column Properties

The following example demonstrates how to animate the columns property along with related column styling −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 600px;
        height: 300px;
        background: white;
        border: 10px solid red;
        animation: columnAnimation 3s infinite;
        position: absolute;
        bottom: 30px;
        column-rule: 10px inset orange;
        column-count: 4;
        padding: 20px;
        font-size: 14px;
        line-height: 1.4;
    }

    @keyframes columnAnimation {
        0% {
            bottom: 30px;
            column-rule-color: orange;
            columns: auto 4;
        }
        50% {
            bottom: 100px;
            box-shadow: 30px 45px 70px orange;
            column-rule-color: black;
            columns: 70px 6;
        }
        100% {
            bottom: 30px;
            column-rule-color: orange;
            columns: auto 4;
        }
    }
</style>
</head>
<body>
    <h2>Animating CSS Columns Property</h2>
    <div class="container">
        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 white box with red border containing text in multiple columns. The animation smoothly transitions from 4 columns to 6 columns with 70px width, while moving vertically and changing the column rule color from orange to black. The box also gains an orange shadow during the animation.

Key Animation Properties

Property Description
columns Shorthand for column-width and column-count
column-rule-color Color of the line between columns
column-count Number of columns to display
column-width Optimal width for each column

Conclusion

Animating the columns property creates smooth transitions between different column layouts. You can combine it with other CSS properties like column-rule-color and positioning for more dynamic effects.

Updated on: 2026-03-15T13:30:18+05:30

230 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements