In this video, We’ll show you how to create a minimalistic text slider animation with just CSS in just a few minutes.
🔔 Subscribe: https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg
Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="slider-wrapper">
I can write
<div class="slider">
<div class="slider-text1">HTML</div>
<div class="slider-text2">CSS</div>
<div class="slider-text3">PHP</div>
</div>
</div>
</div>
</body>
</html>
CSS
html,body {
margin: 0;
width: 100%;
height: 100%;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider-wrapper {
font-size: 40px;
color:#aaa;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.slider{
height: 50px;
padding-left:15px;
overflow: hidden;
}
.slider div {
color:#fff;
height: 50px;
margin-bottom: 50px;
padding: 2px 15px;
text-align: center;
box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 5s linear infinite;
}
.slider-text2 {
background: skyblue;
}
.slider-text3 {
background: lightcoral;
}
@keyframes slide {
0% {margin-top:-300px;}
5% {margin-top:-200px;}
33% {margin-top:-200px;}
38% {margin-top:-100px;}
66% {margin-top:-100px;}
71% {margin-top:0px;}
100% {margin-top:0px;}
}
#css