The steps() method is a timing function in animation property that divides an animation into n steps, displaying each step at equal intervals of time. For example, if n is 2 then it will divide the animation into 2 parts. It divides the duration from 0% to 100% into 2 parts which are 0% – 50% and 50% – 100% respectively.
Syntax:
steps( n , jumpterm )
Where,
- n: Number of divisions between the start and stop of the animation.
-
jumpterm: It indicates the behavior of the steps function and has the following possible values:
- jump-start/start: Indicates that the first jump happens when the animation begins.
- jump-end / end: Indicates that the last jump happens when the animation ends.
- jump-none: It holds the object at both the 0% mark and the 100% mark, each for 1/n of the duration.
- jump-both: Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.
Example 1: In this example, we will create 2 sliding bars one without steps() and one with steps(). This example will help you to recognize the difference.
<!DOCTYPE html> <html>
<head>
<title>
How to use steps() method in CSS Animations ?
</title>
<style>
.bar1 {
width: 10%;
height: 40px;
margin: 2%;
border: solid;
background: blue;
animation: play 2s infinite;
}
.bar2 {
width: 10%;
height: 40px;
margin: 2%;
background: green;
border: solid;
animation: play 2s steps(10, end) infinite;
}
@keyframes play {
100% {
width: 90%
}
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to use steps() in CSS Animations?
</h3>
<div class="bar1"></div>
<div class="bar2"></div>
</body>
</html>
|
Output: In this example, we have two bars ( blue and green) where blue is sliding without steps and green is sliding with steps. The bars are sliding with a duration of 2 sec. In the case of the green bar, the duration of 2 sec is divided into 10 stops and hence the bar is expanding with 10 stops.
Example 2: In this example, we will create a clock hand one without steps() and one with steps(), we have two clocks where one is without steps and the other is with steps. The clocks are only representing the second’s pin. In the case of the left clock the pin is rotating continuously for 60 sec (there is a smooth transition) and in the right clock, the pin completes it with 60 stops.
<!doctype html> <html lang="en">
<head>
<style>
.demo {
width: 500px;
display: flex;
justify-content: space-between;
}
.demo .circle {
width: 120px;
height: 120px;
border: solid;
border-radius: 50%;
position: relative;
}
@keyframes circle {
from {
transform: rotate(90deg);
}
to {
transform: rotate(450deg);
}
}
@keyframes circle {
from {
transform: rotate(90deg);
}
to {
transform: rotate(450deg);
}
}
.demo .pin {
height: 2px;
position: absolute;
top: 50%;
transform-origin: 100% 50%;
width: 50%;
background-color: blue;
animation: circle 60s steps(60) infinite;
}
.demo .without_step .pin {
animation: circle 60s linear infinite;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>How to use steps( ) in CSS Animations?</h3>
<div class="demo">
<section class="without_step">
<h3>Without Steps</h3>
<div class="circle">
<div class="pin"></div>
</div>
</section>
<section class="with_step">
<h3>With Steps</h3>
<div class="circle">
<div class="pin"></div>
</div>
</section>
</div>
</body>
</html>
|
Output: You can observe the difference, the left circle pin is rotating seamlessly and the right one is not.