Today we will see how to create scrolling text effect in pure CSS only.
In this we will do only css in which we will tell you how to scroll text with the help of @keyframes.
How To Create Slot Machine Transition in only Pure CSS
You can also do Slot Machine Transition with the help of this code.
you follow the steps given below
Step1:- Add This HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slot Machine Transition</title>
</head>
<body>
<div class="spin">
<div class="letter-first">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-second">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-third">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-four">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-five">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-six">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
<div class="letter-seven">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span>z</span>
</div>
</div>
</body>
</html>Step2:- Add this style CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.spin{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.letter-first, .letter-second , .letter-third, .letter-four, .letter-five , .letter-six , .letter-seven{
display: flex;
flex-direction: column;
height: 100px;
background-color: #f4f4f4;
font-size: 90px;
text-align: center;
color: #000;
border: 1px solid red;
overflow: hidden;
text-transform: uppercase;
}
.letter-first span{
--ch:-25;
animation: scroll 1s 1s linear forwards;
}
.letter-second span{
--ch:-25;
animation: scroll 3s 1s linear forwards;
}
.letter-third span{
--ch:-25;
animation: scroll 4s 1s linear forwards;
}
.letter-four span{
--ch:-25;
animation: scroll 5s 1s linear forwards;
}
.letter-five span{
--ch:-25;
animation: scroll 6s 1s linear forwards;
}
.letter-six span{
--ch:-25;
animation: scroll 7s 1s linear forwards;
}
.letter-seven span{
--ch:-25;
animation: scroll 8s 1s linear forwards;
}
@keyframes scroll {
to{
transform: translateY(calc(var(--ch)*100%));
}
}
