creocodigo
Pure Text Typing Animation

Pure Text Typing Animation

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a Typing animation of text using CSS Animation. This type of animation is mostly seen in portfolio websites. Many Web Developers and Graphic Designers use this effect to attract viewers and it enriches the landing page of the website.

Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Multiple Texts Typing Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
  <div class="wrapper">
    <div class="static-txt">I'm a</div>
    <ul class="dynamic-txts">
      <li><span>Designer</span></li>
      <li><span>Developer</span></li>
      <li><span>Freelancer</span></li>
      <li><span>Mentor</span></li>
      <li><span>Technical Writer</span></li>
    </ul>
  </div>
</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

@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: #f6f7fc;
}
.wrapper{
  display: flex;
  margin-left: 10%;
}
.wrapper .static-txt{
  color: #463f57;
  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: #b74096;
  font-size: 60px;
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
.dynamic-txts li span{
  position: relative;
  margin: 5px 0;
  line-height: 80px;
}
.dynamic-txts li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #f6f7fc;
  border-left: 2px solid #b74096;
  animation: typing 3s steps(10) infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

CSSWeb DevelopmentCSS AnimationTypeScriptanimation