Disappear text animation with html and css in 2022 by jishaansinghal with full source code
Html:
<div class="animation">
<span>d</span> <span>i</span> <span>s</span> <span>a</span> <span>p</span> <span>p</span> <span>e</span> <span>a</span> <span>r</span>
</div>
Css:
body {
height:100vh;
font-family: 'Poppins', sans-serif;
font-size:12vw;
text-transform: uppercase;
overflow: hidden;
}
.animation {
position: absolute;
left:0;
right:0;
margin: auto;
width:100%;
text-align: center;
height:fit-content;
bottom:0;
top:0;
}
.animation span {
font-weight: 900;
display: inline-block;
color:transparent;
text-shadow: 0px 0px 0px black;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.animation span:nth-child(1){
animation-name: animationleft;
}
.animation span:nth-child(2){
animation-name: animationleft;
animation-delay: .3s;
}
.animation span:nth-child(3){
animation-name: animationight;
animation-delay: .6s;
}
.animation span:nth-child(4){
animation-name: animationleft;
animation-delay: .8s;
}
.animation span:nth-child(5){
animation-name: animationight;
animation-delay: 1s;
}
.animation span:nth-child(6){
animation-name: animationight;
animation-delay: 1.3s;
}
.animation span:nth-child(7){
animation-name: animationleft;
animation-delay: 1.6s;
}
.animation span:nth-child(8){
animation-name: animationight;
animation-delay: 2s;
}
.animation span:nth-child(9){
animation-name: animationight;
animation-delay: 2.3s;
}
@keyframes animationleft{
50% {transform: skew(50deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
@keyframes animationight{
50% {transform: skew(-50deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
Comments
Post a Comment