Skip to content
Related Articles
Open in App
Not now

Related Articles

Create a Letter-Spacing Animation Effect using HTML and CSS

Improve Article
Save Article
Like Article
  • Last Updated : 22 Oct, 2021
Improve Article
Save Article
Like Article

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.


  • 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.


<!DOCTYPE html>
<html lang="en">
    <!-- CSS Code -->
        * {
            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;
    <div id="text_container">
        <h1 id="text">Geeks for Geeks</h1>


Letter Spacing animation

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!