Text Typing Animation in HTML CSS

Adding a little animation to a website can make it eye-popping. There are various ways you can create animations, one of which is adding a typing effect to your text. Typewriter text animations are quick to implement and can do wonders for your website by making it look exceptionally impressive.

This type of animation is a way to make your typing effect look cool. It is achieved by positioning the paragraph containing the text to the right.

Source Code :

<!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">
  <title>Typing Animation</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Tutor Joes Software Solution</h1>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}

body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1B1464;
}

h1{
  font-size: 60px;
  font-weight: 500;
  color:white;
  width: 0ch;
  white-space: nowrap;
  overflow: hidden;
  border-right:1px solid white ;
  animation: typing 8s steps(20) infinite;
}

@keyframes typing {
  0%{
    width: 0ch;
  }
  50%{
    width: 31ch;
  }
}

Output

Live Preview

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Text Typing Animation in HTML CSS

Source Code :

css/style.css

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects