
The CSS steps() define a stepping function, with two parameters.
The first parameter defines the number of intervals in the function. The second parameter, which is optional, is either the value “start” or “end”, and defines the point at which the change of values occur within the interval.
Note: If you do not specify the second parameter, it is given the value “end”.
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
#square1 {
width: 100px;
height: 50px;
background: #2a9d8f;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: mymove 5s infinite;
animation-timing-function: steps(5,end);
}
@keyframes mymove {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div id="square1">steps</div>
</body>
</html>
Output:
steps
Example2:
CSS Typing effect:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content:center;
height: 100vh;
align-items: center;
background-color: #faedcd;
}
.text-container {
position: relative;
}
.a, .b {
font-size: 50px;
font-family: 'Courier New', monospace;
letter-spacing: 4px;
position: relative;
line-height:.2;
}
.a:before, .b:before {
content:"";
position: absolute;
background-color: #faedcd;
height: 55px;
top:-14px;
left:-2px;
}
.a:before {
width:220px;
animation: move 2s steps(6,end) forwards 1s;
}
@keyframes move {
0% {transform: translateX(0);opacity:1;}
80% {transform: translateX(201px);opacity:1;}
100% {transform: translateX(201px); opacity:0;}
}
.a:after, .b:after {
content:"|";
font-weight: 100;
left:-5px;
top:-2px;
position: absolute;
}
.a:after {
animation: move 2s steps(6,end) forwards 1s;
}
.b:before {
width:420px;
animation: moveTwo 4s steps(12,end) forwards 3.2s;
}
.b:after {
opacity:0;
animation: moveTwo 4s steps(12,end) forwards 3.2s, blink .7s ease infinite 6.5s;
}
@keyframes moveTwo {
0% {transform: translateX(0);opacity:1;}
80% {transform: translateX(411px);opacity:1;}
100% {transform: translateX(411px); opacity:1;}
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body>
<div class="text-container">
<p class="a">HELLO!</p>
<p class="b">HOW ARE YOU?</p>
</div>
</body>
</html>
Output:
*for the best animation effect choose the monospace font.
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you:
CSS Slide Text Animation/ Slide Effect