Text Animation Using HTML CSS Only

Here we are going to build a Text Animation Using HTML CSS Only.

Before starting I want to give you one advice that whenever you start learning about anything in this case its web development obviously start doing projects as soon as you finish learning the basics. Here are some of the web development projects which you can consider doing as a beginner.

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code. If you do not have VS Code Installed on your system, then you may find this article helpful -

➡️ VS Code Installation [Step by Step Guide]

Create three new files for html css and javascript seperately and link them all in html file. HTML is the skeleton of our website, css adds design to the contents of HTML file and JavaScript adds the functionality in our clock.

Now lets code text animation using HTML CSS Only.

HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>TEXT - Animation</title>
</head>
<body>
    <h2 data-text="Follow @codeitwise">Follow @codeitwise</h2>
</body>
</html>

CSS Code (style.css)

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #0c0c0c;
}
h2{
    position: relative;
    font-size: 7em;
    color: #222222;
}
h2::before{
    content: attr(data-text);
    position: absolute;
    color: white;
    width: 350px;
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid white;
    animation: animate 8s linear infinite;
    filter: drop-shadow(0 0 20px white) drop-shadow(0 0 50px white);
}
@keyframes animate {
    0%,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}

More like this-

• Password Generator

• Text Reveal Animation

• Simple Calculator

• Digital Stop Watch

• Digital Clock

• Text to Speech AI

More web development Projects