Как сделать анимацию?

Question

[MrDrap]

Здравствуйте.
Есть такой блок у меня
Как на нем сделать анимацию по всему блоку? У меня только получилось на каждый отдельный элемент.
Код такого блока выглядит так:

<div class="demo" layout="row" layout-align="center center">
				<div class="line">

				</div>
				<div class="circle">

				</div>
				<div class="circle">

				</div>
				<div class="circle">

				</div>
			</div>

А стили для него:

.demo
	background: #fff !important
	padding: 15px
.line
	position: relative
	overflow: hidden
	width: 65%
	height: 40px
	border-radius: 50px
	background: #ccc
	&::after
		content: ''
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		background: linear-gradient(90deg, #ccc, lighten(#ccc, 7%), #ccc)
		animation: progress 3s ease-in-out infinite
.circle
	position: relative
	overflow: hidden
	margin-left: 10px
	width: 10%
	height: 40px
	background: #ccc
	border-radius: 50%
	&::after
		content: ''
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		background: linear-gradient(90deg, #ccc, lighten(#ccc, 7%), #ccc)
		animation: progress 3s ease-in-out infinite
@keyframes progress
	0%
		transform: translate3d(-100%, 0, 0)
	100%
		transform: translate3d(100%, 0, 0)

Comments

[DotDash]

так и не понял, что за анимацию. Киньте пример в jsfiddle

[MrDrap]

DotDash, https://codepen.io/wssazonov/pen/rrRdbZ вот сейчас так сделано.
а мне надо чтобы оно просто слева направо шло, а не на каждом элементе

[DotDash]

MrDrap, поставьте таймаут для каждого следующего блока на время выполнения предыдущей анимации, и время повторения как сумму таймаутов.

[MrDrap]

DotDash, спасибо. Только такой есть вариант или можно еще как то реализовать?

[MrDrap]

DotDash, не могли бы вы пример сделать по моему codepen, а то не получается...

Answer 1

[DotDash]

https://codepen.io/anon/pen/wxZqVj