Create a Letter-Spacing Animation Effect using HTML and CSS Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like 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: Comment More infoAdvertise with us Next Article Create a Letter-Spacing Animation Effect using HTML and CSS I iamgaurav Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Create a Dot loading Animation using HTML and CSS? The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa 2 min read How to Create Loading Blur Text Animation Effect using HTML and CSS? The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS.Approach: The approach to create loading blur tex 3 min read How to Create Typewriter Animation using HTML and CSS ? A typewriter animation simulates the appearance of text being typed out letter by letter, using only HTML and CSS. This effect is a simple yet eye-catching way to bring dynamic text to life on a website, capturing attention without the need for JavaScript. It's a great technique to make key text ele 6 min read Text Typing Animation Effect using HTML CSS and JavaScript To create a text-typing animation effect, we will use a combination of HTML structure, CSS animations, and JavaScript logic to create the typing and deleting text like effect.HTML<!-- index.html --> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <bod 2 min read How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html 4 min read Like