Categories
CSS Web development

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

How to use CSS steps() Function ?/ CSS typewriting

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> 
.text-container {
  position: relative;
}

.text {
  font-size: 50px;
  font-family: arial;
  letter-spacing: 0.1em;
}

.text:before {
  content:"";
  position: absolute;
  background-color: white;
  width:220px;
  height: 50px;
  top:7px;
  left:3px;
  animation: move 2s steps(6,end) forwards;
  animation-delay:1s;
}

@keyframes move {
   to {
    transform: translateX(215px);
  }
}

.text:after {
  content:"|";
  font-weight: 100;
  left:-5px;
  top:-3.5px;
  position: absolute;
  animation: blink .5s ease infinite alternate, move 2s steps(6,end) forwards;
  animation-delay:1s;
}

@keyframes blink {
  from { opacity: 1; }	
	to { opacity: 0; }
}
</style>
</head>
<body>
    
<div class="text-container">
  <div class="text">HELLO!</div>
</div>

</body>
</html>

Output:

Enjoy coding!