Как заполнить div цветом на css постепенно?

Question

[tatarka_tasamaia]

<div class="div_color_fade">
	<!-- он пустой с шириной 400 и высотой 100 -->
</div>

Хочу понять как сделать так что бы он начал свое заполнение изначально на 100 пикселей, через 2 секунды ещё на 100 и ещё через 2 секунды на ещё 200
Заполнение с помощью слайда с левой стороны

Answer 1

[Павел]

htmlbook.ru/css3-na-primerakh/lineinyi-gradient
https://html5book.ru/css3-animation/

делаете анимацию по чекпоинтам, как бы делите на ваши участки , задаете разные % градиенту

Comments

[tatarka_tasamaia]

Подскажите а как правильно задавать чекпоинты и делей между ними?
Хочу что бы первый шаг был через 1,5 секунды, второй через 2 после первого, а третий через 4 после второго
https://jsfiddle.net/v2w31rbx/1/