Open In App

Create a Letter-Spacing Animation Effect using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to create a letter-spacing animation using CSS. Letter spacing is the available space between the letters in a particular word, we will walk through each step to achieve this animation effect for our web page.

Approach:

  • Initially, letter-spacing will be -15px.
  • At 20%, letter-spacing will be 10px.
  • Finally, at 100% letter-spacing will be at 2px.

Example: In this example, we will animate the letter-spacing of a word. We have used the animation property which is used for creating animation in CSS. We have set a duration of 3 seconds. We have to use @keyframes rules which are responsible for making an element to animate. We can use percentage values for creating animation for an element. In this case, we are using three percentage values for our text. In our case we will animate the values of letter-spacing which is a property for text in CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
      
    <!-- CSS Code -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
  
        #text_container {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100vh;
        }
  
        #text {
            font-weight: 100;
            opacity: 1;
            animation: animate 3s ease-out forwards infinite;
            animation-delay: 1s;
        }
  
        /* For animation */
        @keyframes animate {
            0% {
                letter-spacing: -15px;
            }
  
            20% {
                letter-spacing: 10px;
            }
  
            100% {
                letter-spacing: 2px;
            }
        }
    </style>
</head>
  
<body>
    <div id="text_container">
        <h1 id="text">Geeks for Geeks</h1>
    </div>
</body>
  
</html>


Output:

Letter Spacing animation



Last Updated : 22 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads