Sliding Texts Animation Using HTML & CSS

Irfan Hussain
May 14, 2020
Legenddocx Creation represents you In this Video How to create Sliding Texts Animation Using HTML & CSS.
Sliding Texts Animation Using HTML & CSS


HTML
<html>

<head>
<title>Text</title>

</head>

<body>
<div class="content">
<div class="slider-wrapper">I am
<div class="slider">
<div class="slider-text1">ENGINEER</div>
<div class="slider-text2">DOCTOR</div>
<div class="slider-text3">TEACHER</div>

</div>


</div>

</div>
</body>

</html>

CSS

<style>
.content {
width: 100vw;
height: 100vh;
display: flex;
background-color: azure;
align-items: center;
justify-content: center;
}

.slider-wrapper {
color: #067ff9;
font-family: 'Tangerine', serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}

.slider {
height: 50px;
padding-left: 15px;
}

.slider-text1 {
background: linear-gradient(to left, #f9f006 75%, #eee 25%);
box-shadow: 6px 6px 12 px #fff000;
animation: slide 5s linear infinite;
}

.slider-text2 {
background: linear-gradient(to left, #e22de6 75%, #eee 25%);
box-shadow: 6px 6px 12 px #e22de6;

}

.slider-text3 {
background: linear-gradient(to left, #7f2de6 75%, #eee 25%);
box-shadow: 6px 6px 12 px #7f2de6;

}

.slider div {
color: #000;
height: 50px;
margin-bottom: 50px;
padding: 2px 15px;
text-align: center;
box-sizing: border-box;
}

.slider {
height: 50px;
border-radius: 10px;
padding-left: 15px;
overflow: hidden;
}

@keyframes slide {
0% {
margin-top: -300px
}

33% {
margin-top: -200px;
}

66% {
margin-top: -100px;
}

100% {
margin-top: 0px;
}
}

</style>