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
Create a Letter-Spacing Animation Effect using HTML and CSS
In this article, we are going to create a letter-spacing animation effect using HTML and CSS. To do so, we have CSS letter-spacing property and CSS @keyframes rule.
CSS Letter-spacing Property
The letter-spacing property in CSS is used to set the horizontal spacing between the text characters.
If we assign a positive value for this property, the character spaces will spread farther apart.
If we assign a negative value for this property, it brings the characters closer together.
Syntax
Following is the syntax of CSS letter-spacing property
letter-spacing: value;
CSS @keyframes Rule
In CSS, the @keyframes rule can be used to control the immediate steps in a CSS animation sequence by defining styles for keyframes. The style change will happen in percentages, or with the keywords "from" and "to", which is same as 0% and 100%. 0% is considered as beginning of the animation and 100% is ending of the animation.
Syntax
Following is the syntax of CSS @keyframes rule
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
Example: Letter-Spacing Animation
Following is the complete example to create a letter-spacing animation effect using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Letter-Spacing Animation Effect</title>
<style>
body {
background: lightblue;
font-family: Arial, sans-serif;
padding: 50px 0;
}
/* CSS for the text */
.animated-text1 {
font-size: 50px;
font-weight: bold;
color: whitesmoke;
animation: letter-spacing-animation 2s infinite alternate;
text-align: center;
margin: 20px 0;
}
.animated-text2 {
font-size: 25px;
color: whitesmoke;
animation: letter-spacing-animation 2s infinite alternate;
text-align: center;
margin: 20px 0;
}
/* CSS animation keyframes */
@keyframes letter-spacing-animation {
0% {
letter-spacing: 0px;
}
50% {
letter-spacing: 10px;
}
100% {
letter-spacing: 20px;
}
}
</style>
</head>
<body>
<p class="animated-text1">TUTORIALSPOINT</p>
<p class="animated-text2">Simply Easy Learning...</p>
</body>
</html>
Two animated text elements appear on a light blue background. The text "TUTORIALSPOINT" in large white letters and "Simply Easy Learning..." in smaller text both continuously animate their letter spacing from normal (0px) to widely spaced (20px) over 2 seconds, creating a pulsing letter-spacing effect.
How It Works
The animation works by:
@keyframes defines three stages: 0% (normal spacing), 50% (10px spacing), and 100% (20px spacing)
animation property applies the keyframe with 2s duration, infinite repetition, and alternate direction
alternate direction makes the animation play forward then backward, creating a smooth back-and-forth effect
Conclusion
The letter-spacing animation effect is created by combining the CSS letter-spacing property with @keyframes rule. This creates an engaging visual effect where text characters smoothly expand and contract their spacing.
748 Views
