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-gap property
The CSS column-gap property is used to set the gap between columns in a multi-column layout. When combined with CSS animations, you can create smooth transitions that adjust the spacing between columns over time.
Syntax
selector {
column-gap: value;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
percentage {
column-gap: new-value;
}
}
Example
The following example demonstrates how to animate the column-gap property to create a dynamic spacing effect between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-count: 4;
column-gap: 10px;
padding: 20px;
margin: 20px;
}
@keyframes myanim {
0% {
column-gap: 10px;
}
50% {
column-gap: 70px;
bottom: 100px;
box-shadow: 30px 45px 70px orange;
}
100% {
column-gap: 10px;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column-gap 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!
This is demo text!
</div>
</body>
</html>
A multi-column layout with red border animates smoothly. The column gaps start at 10px, expand to 70px at the midpoint, then return to 10px. The container also moves vertically and gains an orange shadow during the animation, creating a dynamic visual effect that repeats every 3 seconds.
Conclusion
Animating the column-gap property creates smooth transitions between different column spacing values. This technique is useful for creating dynamic layouts where the column spacing needs to change responsively or for visual effects in multi-column designs.
Updated on: 2026-03-15T13:27:21+05:30
621 Views
Advertisements