This content originally appeared on DEV Community and was authored by Robson Muniz
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</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>
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;
}
}
?Resources:
Pic used in the Project: https://bit.ly/37NxuuO
This content originally appeared on DEV Community and was authored by Robson Muniz
Robson Muniz | Sciencx (2021-08-26T20:47:01+00:00) ?CSS Text Typing Animation | HTML & CSS. Retrieved from https://www.scien.cx/2021/08/26/%f0%9f%8e%accss-text-typing-animation-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.