Text Typing Animation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Typing Animation</title>
<style>
body{
background-color: black;
}
.hero{
display: flex;
}
.hero .static-txt{
color: rgb(238, 232, 232);
font-size: 90px;
font-weight: 400;
}
.hero .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #16f37d;
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: 200%;
width: 200%;
background: rgb(10, 9, 9);
border-left: 2px solid #16f37d;
animation: typing 3s steps(10) infinite;
}
@keyframes typing{
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
</style>
</head>
<body>
<div class="hero">
<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>