How to use CSS steps() Function ?/ CSS typing effect

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:

*to see the animation on the website click here.

*for the best animation effect choose the monospace font.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

HTML & CSS Clock Animation

JS Typing Effect

CSS Slide Text Animation/ Slide Effect

Share this: