Letter by Letter Text Animation Using Pure CSS & HTML
Letter by Letter Text Animation Using Pure CSS & HTML
Text animation is the creation of beautiful and colourful letters, words and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern.
This text animation effect is very easy to implement and it's very useful because you can add multiple words when you want to describe a service or a product. It's like a slider but the best part is that you don't have to add any javascript or css library to slow down your website, with just few lines of css and html you can create this nice animation.
HTML Code:
Let's start with the HTML structure:.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text"> Welcome to Anutrickz </div>
</body>
</html>
Now, we have to add few lines of CSS in order to animate the above structure.
CSS Code:
animation: 3s steps(34) 1s 1 normal both running animate-phrase;white-space: nowrap;max-width: fit-content;overflow: hidden;
@-webkit-keyframes animate-phrase{from{width:0}to{width:100%}}@keyframes animate-phrase{from{width:0}to{width:100%}}