Проблема с анимацией является то, что на самом деле animation-delay относится только к первой итерации анимации. Ниже приведено объяснение, почему оно работает, когда есть только 2 итерации и почему это не происходит, когда есть бесконечные итерации.
Почему это работает, когда есть только 2 итерации?
- Первый
span начинает свою анимацию на 0.2s (после animation-delay). Между 0.2s к 1.7s, цвет рамки идет от #333 к #ddd (при 0.95s которая 50% из 1.5s длительности, чтобы быть точным), а также между 1.7s и 3.2s он идет назад (в обратном направлении) от #ddd к #333 (при 2.45s, чтобы быть точным).
- Второй
span начинает свою анимацию по адресу 0.7s. Между 0.7s к 1.7s, цвет рамки идет от #333 к #ddd (при 1.2s, чтобы быть точным), а также между 1.7s к 2.7s он идет назад (обратный) от #ddd к #333 (при 2.2s, чтобы быть точным).
- Третий
span начинает свою анимацию 1.2s. Между 1.2s к 1.7s, цвет рамки идет от #333 к #ddd (при 1.45s, чтобы быть точным), а также между 1.7s к 2.2s он идет назад (обратный) от #ddd к #333 (при 1.95s, чтобы быть точным).
Element | Iteration 1 | Iteration 2
---------------------------------------------------
First Span | 0.95s | 2.45s
Second Span | 1.2s | 2.2s
Third Span | 1.45s | 1.95s
Как вы можете видеть, есть хороший поток к нему, насколько есть только две итерации.
Почему это не работает, когда количество итераций установлено до бесконечности?
Теперь давайте посмотрим, что происходит с третьей и последующих итераций:
- Первый
span - Между 3.2s до 4.7s, граница цвет идет от #333 к #ddd (в 3.95s, чтобы быть точным), а также между 4.7s и 6.2s он возвращается (назад) от #ddd до #333 (при 5.45s, если быть точным).
- Второй
span - Между 2.7s до 3.7s граница цвет идет от #333 к #ddd (при 3.2s, чтобы быть точным), а также между 3.7s к 4.7s он идет назад (обратный) от #ddd к #333 (при 4.2s, чтобы быть точным).
- Третий
span - Между 2.2s до 2.7s границы цвет идет от #333 к #ddd (в 2.45s, чтобы быть точным), а также между 2.7s к 3.2s он идет назад (реверс) от #ddd до #333 (в 2.95s быть точным).
Element | Iteration 1 | Iteration 2 | Iteration 3 | Iteration 4
------------------------------------------------------------------------------------------
First Span | 0.95s | 2.45s | 3.95s | 5.45s
Second Span | 1.2s | 2.2s | 3.2s | 4.2s
Third Span | 1.45s | 1.95s | 2.45s | 2.95s
Как вы можете видеть поток полностью перепутались, потому что анимация начинают перекрываться в связи с тем, как продолжительность анимации и задержки настроены.
Решение:
В целом, подход для введения задержки между каждой итерацией бесконечной анимации петли является изменением ключевых кадров таким образом, что они добавляют равные задержки для каждой итерации. Я объяснил это в my answer here. К сожалению, ваш случай намного сложнее из-за обратной анимации. Я не мог изменить ключевые кадры, чтобы соответствовать вашим ожиданиям, но я надеюсь, что вы найдете объяснение abov полезным для понимания проблемы.
Если вы хотите использовать альтернативные методы для достижения такого же эффекта, вы можете посмотреть фоновые изображения linear-gradient, чтобы создать эффект гамбургера, а затем добавить к нему анимацию.
.lines {
margin: 0 auto;
height: 30px;
width: 30px;
background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
background-size: 100% 5px;
background-position: 0px 5px, 0px 15px, 0px 25px;
background-repeat: no-repeat;
animation: bars 1.7s infinite alternate ease-in-out;
}
@keyframes bars {
0% {
background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
}
33% {
background-image: linear-gradient(#ddd, #ddd), linear-gradient(#333, #333), linear-gradient(#333, #333);
}
66% {
background-image: linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), linear-gradient(#333, #333);
}
100% {
background-image: linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lines"></div>
Ниже приводится решение, используя свой первоначальный подход (любезно предоставлены vals). Но вы не можете повторно использовать ключевые кадры!
.line {
border-bottom: 0.2em solid #333;
display: block;
margin: 0 auto;
margin-top: 0.3em;
width: 1.5em;
}
.line {
animation: 1.7s ease-in-out infinite alternate fade_line1;
}
.line:nth-child(2) {
animation-name: fade_line2;
}
.line:nth-child(3) {
animation-name: fade_line3;
}
@keyframes fade_line1 { /* use 25% instead of 30% if the splits need to be equal among all 3 */
0%, 30% {
border-bottom-color: #333;
}
30%, 100% {
border-bottom-color: #ddd;
}
}
@keyframes fade_line2 {
0%, 50% {
border-bottom-color: #333;
}
50%, 100% {
border-bottom-color: #ddd;
}
}
@keyframes fade_line3 { /* use 75% instead of 70% if the splits need to be equal among all 3 */
0%, 70% {
border-bottom-color: #333;
}
70%, 100% {
border-bottom-color: #ddd;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lines">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
Я немного потерял о том, как это исправить, но причина проблемы заключается в том, как из-за 'анимационная-delay' работ. Задержка добавляется только в первый раз. Таким образом, анимации перекрываются. Вы можете найти [эту тему] (http://stackoverflow.com/questions/32223835/repeat-animation-every-3-seconds/32223950#32223950), немного полезную при поиске решения. – Harry
Я не смог найти способ исправить эту анимацию, но [** здесь **] (https://jsfiddle.net/70w8mLq4/3/) - это часть кода, которая создает нечто подобное. Не уверен, что это вам поможет. – Harry