Пошаговая анимация
1-ый способ: transition
Анимация задаётся в третьем параметре transition
через steps()
, в котором указывается количество шагов, за которое надо завершить анимацию.
/* 1-ый способ */ div { transition: width 0.5s steps(6); } /* 2-ой способ */ div { transition: width 1.5s; transition-timing-function: steps(6); }
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); }
Поддержать автора