Typing text animation using html css source code

Typing text animation using html and css

In this article, we given a Typing text animation using html css source code as a project. Typing text animation is the unique project where the text automatically typed with animation, that looks attractive and advanced. In this project, we created a animated typing text using some advanced css properties. Also, you can use this on any another project as portfolio website.

So, Must try this advanced project for practice in vs code to check how it works. We have given a complete source code of Typing text animation using html css. Let's go and check the source code as given below -

To add this project in vs code, follow the given process :-

1) Create a New folder in file manager name as - typing-text-animation.

2) Open the folder in VS code.

3) Add file name as - index.html and copy the html code as given.

4) Add another file name as - style.css and copy the css code as given.

5) Then run the code or check the preview with code preview extension in vs code.

Typing text animation using html css source code

Here we given a html and css source code of Typing text animation project as given -

HTML

In HTML code, we created a div tag for structure and added a heading or text to apply typing text animation. Linked a css file to add the animation to the text. Copy the given html code and paste it into index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <h1 class="typing-text">welcome to codelifeline</h1>
</div>
</body>
</html>

CSS

In CSS code, we added a styling to the project of typing text animation. Added advanced properties to give a animation look to the text. Added a media query to adjust size. Copy the given css code and paste it into style.css file.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.container {
  text-align: center;
}

.typing-text {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}

@media (max-width: 768px) {
  .typing-text {
    font-size: 1.5rem;
  }
}

Output

Check this output of Typing text animation -

Also see this -

Underline hover effect using html and css with source code

Hope this helps you to know about Typing text animation using html css source code. If you have any confusion or query then you can contact us on our coding community.

Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.

Typing text animation using html css source code

Typing text animation using html css source code

HTML

CSS

Output

Contact Form