Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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%);
}
}
Following are the steps to create a letter-spacing animation effect using HTML and CSS.
Step 1 − Add the following HTML code.
In the body part, we are creating two simple texts using paragraph <p> tag.
<body> <p class="animated-text1">TUTORIALSPOINT</p> <p class="animated-text2">Simply Easy Learning...</p> </body>
Step 2 − Include the below CSS code.
To create a letter-spacing animation for the above two texts, we are using the CSS letter-spacing property and CSS @keyframes rule.
<style>
body{
background: lightblue;
}
/* CSS for the text */
.animated-text1 {
font-size: 50px;
font-weight: bold;
color: whitesmoke;
animation: letter-spacing-animation 1s infinite alternate;
text-align: center;
}
.animated-text2 {
font-size: 25px;
color: whitesmoke;
animation: letter-spacing-animation 1s infinite alternate;
text-align: center;
}
/* CSS animation keyframes */
@keyframes letter-spacing-animation {
0% {
letter-spacing: 0px;
}
50%{
letter-spacing: 10px;
}
100% {
letter-spacing: 20px;
}
}
</style>
Complete Example
Now, combine the above two HTML and CSS code blocks as follows −
<!DOCTYPE html>
<html>
<head>
<title>Letter-Spacing Animation Effect</title>
<style>
body {
background: lightblue;
}
/* CSS for the text */
.animated-text1 {
font-size: 50px;
font-weight: bold;
color: whitesmoke;
animation: letter-spacing-animation 1s infinite alternate;
text-align: center;
}
.animated-text2 {
font-size: 25px;
color: whitesmoke;
animation: letter-spacing-animation 1s infinite alternate;
text-align: center;
}
/* 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>
154 Views
