This css code slides and displays text successfully.
How/where can I add the ability for the text to disappear/end (or fade-away)?
Here's the html:
How/where can I add the ability for the text to disappear/end (or fade-away)?
CSS:
.slide-effect {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.slideUp {
position: relative;
font-family: tahoma;
font-size: 35px;
opacity:0;
}
.slideUp {
top:40px;
left:10px;
animation: slideUp ease 1.5s forwards 4.2s;
color:#fff;
opacity:0;
}
@keyframes slideUp {
0% {transform: translateY(0);}
100% {transform: translateY(-40px);opacity:1;}
}
Here's the html:
HTML:
<div class="slide-effect">
<div class="slideUp">Slide Up</div>
</div>
Last edited: