Typing Animation using HTML & CSS

Text Typing Animation using only HTML & CSS

Today in this blog you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation. Earlier I have shared a blog on Colorful Gradient Text Effect using HTML & CSS and now I’m going to create pure CSS text typing animation.

You may have seen this type of text typing animation on many portfolio sites or other sites. Generally, this animation is created using JavaScript or jQuery library, and the famous jQuery library for text animation is typed.js but now I’ll tell you how you can create this text typing animation using only HTML & CSS.

Some Related Posts:-

See also  Mega Menu using HTML & CSS

In this text animation, there are two types of texts that mean one is a static text which has no animation, and the second one has animation and it changes dynamically. I have added four different texts to this animation and it’s shown one by one with a typing animation which looks pretty cool and interesting.

You can watch a demo of this text animation or a full video tutorial which may help you to clear your doubts related to this animation.

Pure CSS Text Typing Animation [Source Codes]

To create this program [Typewriter Text Animation]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this text animation from the below download button.

See also  Testimonials using only HTML CSS

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By codeithub- www.codeithub.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiple Texts Typing Animation | codeithub</title>
  <link rel="stylesheet" href="https://www.codeithub.com/text-typing-animation-using-only-html-css/style.css">
</head>
<body>
  <div class="wrapper">
    <div class="static-txt">I'm a</div>
    <ul class="dynamic-txts">
      <li><span>YouTuber</span></li>
      <li><span>Designer</span></li>
      <li><span>Developer</span></li>
      <li><span>Freelancer</span></li>
    </ul>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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: #343F4F;
}
.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: #FC6D6D;
  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: #343F4F;
  border-left: 2px solid #FC6D6D;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}

That’s all, now you’ve successfully created a Text Typing Animation using only HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

See also  Create Image Accordion using CSS

Leave a Reply