Step-by-Step Animation

1st method: transition

Animation is set in the third parameter transition through steps(), which indicates the number of steps for which you need to complete the animation.

/* 1st method */
div {
    transition: width 0.5s steps(6);
}

/* 2nd method */
div {
    transition: width 1.5s;
    transition-timing-function: steps(6);
}

Example on JSFiddle

2nd method: keyframes

In “keyframes”, step-by-step animation is added through the fourth animation parameter with the value steps(), or through a separate parameter animation-timing-function.

@keyframes myanimation {
    0% {width:0;}
    100% {width:100%;}
}

/* 1st method */
div {
    animation: myanimation 5s infinite steps(6);
}

/* 2nd method */
div {
    animation: myanimation 5s infinite;
    animation-timing-function: steps(6);
}

Example on JSFiddle