Пошаговая анимация

1-ый способ: transition

Анимация задаётся в третьем параметре transition через steps(), в котором указывается количество шагов, за которое надо завершить анимацию.

/* 1-ый способ */
div {
    transition: width 0.5s steps(6);
}

/* 2-ой способ */
div {
    transition: width 1.5s;
    transition-timing-function: steps(6);
}

Пример на JSFiddle

2-ой способ: keyframes

В «keyframes» пошаговая анимация добавляется через четвёртый параметр animation со значением steps(), или через отдельный параметр animation-timing-function.

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

/* 1-ый способ */
div {
    animation: myanimation 5s infinite steps(6);
}

/* 2-ой способ */
div {
    animation: myanimation 5s infinite;
    animation-timing-function: steps(6);
}

Пример на JSFiddle