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 word-spacing property
The CSS word-spacing property controls the space between words in text. You can animate this property to create dynamic text effects where the spacing between words changes smoothly over time.
Syntax
selector {
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { word-spacing: initial-value; }
to { word-spacing: final-value; }
}
Example: Animating Word Spacing
The following example demonstrates how to animate the word-spacing property from normal spacing to 30px and back −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-text {
border: 2px solid blue;
background: orange;
padding: 20px;
font-size: 18px;
animation: word-spacing-animation 3s infinite;
}
@keyframes word-spacing-animation {
0% {
word-spacing: normal;
}
50% {
word-spacing: 30px;
}
100% {
word-spacing: normal;
}
}
</style>
</head>
<body>
<h1>CSS word-spacing Animation</h1>
<div class="animated-text">
This is demo text with animated word spacing!
Watch how the spaces between words expand and contract.
This creates an interesting visual effect for text.
</div>
</body>
</html>
Text appears in an orange box with blue border. The spacing between words continuously animates from normal spacing to 30px and back to normal every 3 seconds, creating a breathing effect.
Key Points
- The animation cycles through different
word-spacingvalues smoothly - Use
infinitefor continuous animation or specify a number for limited repetitions - Different timing functions like
ease-in-outcan create smoother transitions - Word spacing values can be in pixels, ems, or other CSS length units
Conclusion
Animating the word-spacing property creates engaging text effects by smoothly transitioning between different spacing values. This technique is useful for drawing attention to text content or creating dynamic typography effects.
Updated on: 2026-03-15T13:37:59+05:30
172 Views
Advertisements