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
Perform Animation on CSS line-height property
The CSS line-height property can be animated to create smooth transitions between different line spacing values. This is useful for creating dynamic text effects where the vertical spacing between lines changes over time.
Syntax
selector {
line-height: value;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { line-height: initial-value; }
to { line-height: final-value; }
}
Example: Basic Line Height Animation
The following example demonstrates how to animate the line-height property from 20px to 50px −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-text {
width: 400px;
font-size: 16px;
padding: 20px;
border: 2px solid #333;
line-height: 20px;
animation: lineHeightChange 3s infinite alternate;
}
@keyframes lineHeightChange {
0% {
line-height: 20px;
}
100% {
line-height: 50px;
}
}
</style>
</head>
<body>
<p class="animated-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!
</p>
</body>
</html>
A paragraph with text that smoothly transitions between tight line spacing (20px) and loose line spacing (50px) over 3 seconds, then reverses back, creating a breathing effect.
Example: Multi-Step Animation
You can create more complex animations with multiple keyframes for varied line-height changes −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-step {
width: 350px;
font-size: 14px;
padding: 15px;
background-color: #f0f8ff;
border-radius: 8px;
line-height: 18px;
animation: complexLineHeight 4s infinite;
}
@keyframes complexLineHeight {
0% { line-height: 18px; }
25% { line-height: 35px; }
50% { line-height: 15px; }
75% { line-height: 40px; }
100% { line-height: 18px; }
}
</style>
</head>
<body>
<div class="multi-step">
Watch this text as the line spacing changes dynamically!
The animation creates various spacing effects throughout the cycle.
This demonstrates the versatility of line-height animations.
</div>
</body>
</html>
A light blue box with text that cycles through different line-height values: starting at normal spacing (18px), expanding to wide spacing (35px), compressing to tight spacing (15px), expanding again to very wide spacing (40px), then returning to normal over 4 seconds in a continuous loop.
Conclusion
Animating the line-height property creates engaging text effects by smoothly transitioning between different line spacing values. Use keyframes to define multiple stages for more complex animations that can enhance user experience and draw attention to important content.
Updated on: 2026-03-15T13:32:26+05:30
573 Views
Advertisements