Typing Animation

Typing Animation Using HTML & CSS3 min read

Programming, HTML & CSS

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)

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

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