Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Create a Letter-Spacing Animation Effect using HTML and CSS

  • Last Updated : 22 Oct, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!