Skip to content
Home » Typing Animation Using HTML & CSS

Typing Animation Using HTML & CSS

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

Top 10 Programming Languages to Learn In 2023! 9 Best Extensions For Web Developers! | Chrome Extensions For Web Developers Web Development Roadmap Best Resources to Learn PYTHON FREE! Web Vs App Development- Which one is Better?