Здравствуйте.
Есть такой блок у меня
Как на нем сделать анимацию по всему блоку? У меня только получилось на каждый отдельный элемент.
Код такого блока выглядит так:
<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)
Простой
Средний