DEV Community

Robson Muniz
Robson Muniz

Posted on

🎬CSS Text Typing Animation | HTML & CSS

In todays tutorial you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation.


Basically, this animation is created using JavaScript or jQuery library, but today I’ll show you how you can create this text typing animation 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.

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Typing Text Animation | HTML & CSS</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>Youtuber</span></li>
      <li><span>Designer</span></li>
      <li><span>Developer</span></li>
      <li><span>Freelancer</span></li>
    </ul>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

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:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #082032;
}
.wrapper {
    display: flex;
}

.wrapper .static-txt {
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}

.wrapper .dynamic-txts {
    margin-left: 15px;
    line-height: 90px;
    height: 90px;
    overflow: hidden;
}

.dynamic-txts li {
    list-style: none;
    color: #ff4c29;
    font-size: 60px;
    font-weight: 500;
    top: 0;
    position: relative;
    animation: slide 12s steps(4) infinite;
}

@keyframes slide {
    100% {
        top: -360px;
    }
}

.dynamic-txts li {
    position: relative;
}

.dynamic-txts li::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #082032;
    border-left: 2px solid #ff4c29;
    animation: typing 3s steps(10) infinite;
}

@keyframes typing {
    40%,
    60% {
        left: calc(100% + 30px);
    }
    100% {
        left: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

📚Resources:
Pic used in the Project: https://bit.ly/37NxuuO

Top comments (4)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ • Edited

I built something just like this but in JS the other day to play around with custom elements a bit :D

codepen.io/darkwiiplayer/pen/JjNgBaV

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Hey Dev, it really looks good, but the idea was to show how to do it without JS: just html and CSS.
Happy Coding!!!

Collapse
 
meatboy profile image
Meat Boy

Good tutorial and cool text effect 👍 However huge, orange font and other distractive pop-up elements in video are non-professional and looks like PewDiePie content.

Collapse
 
robsonmuniz16 profile image
Robson Muniz

I appreciate your feedback, I am a programmer and not a filmmaker, I still have a lot to learn about video editing, I apologize and I will try to improve it.
In the future, I think about outsourcing video editing and doing what I love: programming.