Skip to content
Home » Blog » Typing Animation Using HTML & CSS

Typing Animation Using HTML & CSS3 min read

Typing Animation

In this Blog, We Will Be Creating a Typing Animation Using HTML & CSS. This Typing Animation Slide Multiple Text In the Following Div. And This is Going Be a Interesting CSS Project And It Will Be Very Easy to Create for a Beginner.

We Will Creating This Typing Animation With 60 Lines Of CSS Only, And Text Sliding Or Typing Animations Are Mostly Seen On Personal Portfolio Sites, Business Sites And Many Other Sites.

This is Going To be My First Ever CSS Animation Post on This Website, And More CSS Animation, JavaScript Projects , Projects Using HTML, CSS Coming, Stay Tuned.

And This Is How Your Typing Animation Project Will Look Like After Writing the HTML & CSS Code:

Img 1

Also Read:

• Create Facebook Post Clone Using HTML, CSS & JavaScript

• To-Do List HTML,CSS & JavaScript

• Glassmorphism Login Form Using HTML & CSS

You can Also Read The Above Posts to Create Awesome Projects & Programs, First Of Have To Create a Folder & Then Create a index.html File & style.css File To Proceed With the Project. Download Copy The Source to Create the Project.

[SOURCE CODE OF THE PROJECT]

HTML CODE Of the Project:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typing Animation Using HTML & CSS </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="static-txt">This is a </div>
    <ul class="dynamic-txts">
      <li><span>Typing Animation</span></li>
      <li><span>Made</span></li>
      <li><span>Using</span></li>
      <li><span>HTML & CSS</span></li>
    </ul>
  </div>
</body>
</html>

CSS CODE Of the Project:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #080808;
}
.wrapper{
  display: flex;
}
.wrapper .static-txt{
  color: #fff;
  font-size: 60px;
  font-weight: 400;
}
.wrapper .dynamic-txts{
  margin-left: 15px;
  height: 90px;
  line-height: 90px;
  overflow: hidden;
}
.dynamic-txts li{
  list-style: none;
  color: #eeff00;
  font-size: 60px;
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
.dynamic-txts li span{
  position: relative;
  margin: 5px 0;
  line-height: 90px;
}
.dynamic-txts li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #080808;
  border-left: 2px solid #eeff00;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}

This Was it For this Blog See you in the Next One Till Then Keep Coding Keep Exploring!

If Like My Work Then Buy Me a Coffee

DOWNLOAD SOURCE CODE

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Random Quote GeneratorRandom Quote Generator JavaScript3 min read Login Sign Up FormGlassmorphism Login Form Using HTML & CSS5 min read Facebook Post CloneCreate Facebook Post Clone Using HTML, CSS & JavaScript8 min read Password ValidationPassword Validation Using JavaScript3 min read Realtime Chat AppRealtime Chat Application Socket.io3 min read Python Qr Code ThumbnailQR Code Generator In Python1 min read Get Form Details Web DevGet Form Data In Google Sheets | Web Development Projects4 min read JARVIS Thumbnail 2JARVIS In Python #2 | Ironman’s JARVIS Using Python4 min read
Tags:

3 thoughts on “Typing Animation Using HTML & CSS3 min read”

  1. Pingback: Email Automation Using Python - Mr Programmer

  2. Pingback: Realtime Chat Application Socket.io - Mr Programmer

  3. Pingback: Password Validation Using JavaScript - Mr Programmer

Leave a Reply