Я строю базу анимированного индикатора зарядного устройства. (см. прикрепленный фрагмент кода). Цель состоит в том, чтобы решить эту проблему с помощью чистого HTML5 и CSS3 без использования JavaScript, библиотек или других структур.
Проблема в том, что после первого цикла анимации анимация меняет поток заказов. Смотрите более подробную информацию ниже. Требуемое решение состоит в том, что бесконечный цикл повторяется точно так же, как и первый цикл. Между циклами анимация должна иметь короткий перерыв либо белым, либо прозрачным цветом.
Во время первого цикла анимации она запускается, как и ожидалось:
- 1-й - красный (постепенно) + черный верхний полюс (где черный конец находится в конце
анимация)
- 2-й - желтый (постепенно)
- 3-й - зеленый (постепенно)
После первого цикла полная анимация должна исчезнуть и повторить последовательность первого цикла, поскольку она настроена на выполнение бесконечных отсчетов.
Сейчас поведение таково:
- 1-й цикл (как описано выше).
Остальные циклы:
шаг-1: все
цвета исчезают одновременно (красный, желтый, зеленый, черный).
шаг-2: цвета
исчезать в следующем порядке (зеленый, желтый + черный и красный).
/********/
/* Grid */
/********/
.wrapper {
width: 180px;
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
300px
;
grid-template-areas:
"battery-body"
;
}
/********/
/* Grid */
/********/
.battery-body {
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
40px
40px
40px
40px
;
grid-template-areas:
"battery-part-1"
"battery-part-2"
"battery-part-3"
"battery-part-4"
;
}
/**********/
/* Layout */
/**********/
.battery-body {
margin-left: 20px;
width: 80px;
}
.battery-part-1 {
grid-area: battery-part-1;
background-color: white;
width: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
animation: black-top 8s 1s infinite;
}
/* Green */
.battery-part-2 {
padding: 20px 0px 0px 20px;
animation: battery-level-green 6s 3s infinite;
}
/* Yellow */
.battery-part-3 {
padding: 20px 0px 0px 20px;
animation: battery-level-yellow 7s 2s infinite;
}
/* Red */
.battery-part-4 {
background-color: white;
padding: 20px 0px 0px 20px;
animation: battery-level-red 8s 1s infinite;
}
/*************/
/* Animation */
/*************/
@keyframes black-top {
from {
opacity: 0;
}
to {
opacity: 1;
background-color: black;
}
}
@keyframes battery-level-green {
from {
opacity: 0;
}
to {
opacity: 1;
background-color: green;
}
}
@keyframes battery-level-yellow {
from {
opacity: 0;
}
to {
opacity: 1;
background-color: yellow;
}
}
@keyframes battery-level-red {
from {
opacity: 0;
}
to {
opacity: 1;
background-color: red;
}
}
<div class="wrapper">
<div class="battery-body">
<div class="battery-part-1"></div>
<div class="battery-part-2"></div>
<div class="battery-part-3"></div>
<div class="battery-part-4"></div>
</div>
</div>