Цикл изображения анимации ключевого кадра css
Я создаю анимацию ключевого кадра css, в которой изображение будет выдвигаться, парковаться на минуту, а затем выдвигаться, когда вставляется следующее изображение, и это будет выполняться в `` бесконечном '' цикле (до тех пор, пока есть ' animate 'класс родительского элемента, который переключается с помощью js при прокрутке).
То, что у меня есть (https://jsfiddle.net/WhiskeyT/Lurkf4f6/), представляет две проблемы:
Во-первых, требуемые тайминги казались простыми - общая продолжительность анимации 3 секунды, продолжительность анимации изображений 1, 2 и 3 установлена на 0, 3 с, 6 с, но, похоже, есть небольшая задержка или разрыв между выходящим изображением и входом. изображение, и я бы очень хотел его подтянуть. Несмотря на часы настройки, я не могу настроить ключевые кадры так, чтобы они были ближе к моей цели.
Вторая проблема более существенна и очевидна: 3 изображения анимируются, и по мере зацикливания анимации повторно загружается только 3-е изображение.
Любая помощь приветствуется.
Виски Т.
<div class = "slide" id = "slide-02">
<div class = "image-rotator">
<img src = "img1.jpg" alt = "img" />
<img src = "img2.jpg" alt = "img" />
<img src = "img3.jpg" alt = "img" />
</div>
</div><!-- #slide-02 -->
.slide {
width: 100%;
height: 100vh;
position: relative;
}
#slide-02 .image-rotator {
position: relative;
width: 50%;
max-width: 450px;
height: 100%;
overflow: hidden;
}
#slide-02.animate .image-rotator img {
position: absolute;
top: 0;
left: -450px; // I remain confused as to how init rule collides w/0% keyframe ;(
width: 100%;
height: 100%;
}
#slide-02.animate .image-rotator img:nth-child(1) { animation: imgRotator 3s ease-in-out infinite 0s; }
#slide-02.animate .image-rotator img:nth-child(2) { animation: imgRotator 3s ease-in-out infinite 3s; }
#slide-02.animate .image-rotator img:nth-child(3) { animation: imgRotator 3s ease-in-out infinite 6s; }
@keyframes imgRotator {
0% {
opacity: 0;
left: 450px;
}
15%, 84% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: -450px;
}
}
Ответы 2
Проблема в том, что после задержек все анимации будут одинаковыми, потому что задержки умножаются на длительность, поэтому только третья останется видимой, поскольку все они анимируются в одинаковых состояниях и друг над другом.
Вы можете уменьшить непрозрачность, и вы четко увидите, что происходит:
.slide {
width: 100%;
height: 80vh;
position: relative;
}
#slide-02 .image-rotator {
position: relative;
max-width: 300px;
height: 100%;
overflow: hidden;
border: 1px solid lime;
}
#slide-02.animate .image-rotator img {
position: absolute;
top: 0;
left: -450px;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
}
#slide-02.animate .image-rotator img:nth-child(1) {
animation: imgRotator 3s ease-in-out infinite 0s;
}
#slide-02.animate .image-rotator img:nth-child(2) {
animation: imgRotator 3s ease-in-out infinite 3s;
}
#slide-02.animate .image-rotator img:nth-child(3) {
animation: imgRotator 3s ease-in-out infinite 6s;
}
@keyframes imgRotator {
0% {
opacity: 0;
left: 450px;
}
15%,
84% {
opacity:0.8;
left: 0;
}
100% {
opacity: 0;
left: -450px;
}
}<div class = "slide animate" id = "slide-02">
<div class = "image-rotator">
<img src = "https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt = "apple" />
<img src = "https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt = "bananas" />
<img src = "https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt = "cherries" />
</div>
</div>
<!-- #slide-02 -->Чтобы исправить это, вы можете настроить анимацию и задержки следующим образом:
.slide {
width: 100%;
height: 80vh;
position: relative;
}
#slide-02 .image-rotator {
position: relative;
max-width: 300px;
height: 100%;
overflow: hidden;
border: 1px solid lime;
}
#slide-02.animate .image-rotator img {
position: absolute;
top: 0;
left: -450px;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
}
#slide-02.animate .image-rotator img:nth-child(1) {
animation: imgRotator 3s ease-in-out infinite 0s;
}
#slide-02.animate .image-rotator img:nth-child(2) {
animation: imgRotator 3s ease-in-out infinite 1s;
}
#slide-02.animate .image-rotator img:nth-child(3) {
animation: imgRotator 3s ease-in-out infinite 2s;
}
@keyframes imgRotator {
0% {
opacity: 0;
left: 450px;
}
50%{
opacity: 1;
left: 0;
}
}<div class = "slide animate" id = "slide-02">
<div class = "image-rotator">
<img src = "https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt = "apple" >
<img src = "https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt = "bananas" >
<img src = "https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt = "cherries" >
</div>
</div>@ WhiskeyT.Foxtrot ну, я бы сказал, что нет общих правил, но все зависит от того, что вы хотите ... первый совет, который я могу вам дать, - сделать анимацию как можно более простой, а затем, в зависимости от состояний анимации, убедитесь, что вы не используете не имеет перекрытия по основному. В вашей скрипке нет необходимости изменять анимацию, просто сохраните ее как ту, которую я вам показываю, вот обновленное: jsfiddle.net/mw9ze8wq/3
Еще раз спасибо Темани. Однако требование состоит в том, чтобы изображение вставлялось и приостанавливалось на секунду или около того, а затем выдвигалось, поэтому мне придется продолжать работать над ним, потому что в этой версии оно постоянно перемещается.
Вы можете добавить паузу в @keyframes: не анимируйте ничего между 30% и 70%
Ваша проблема в основном связана с ключевыми кадрами.
Поскольку у вас трое детей, базовый промежуток времени составляет 1/3 = 33%.
Этот промежуток времени необходимо разделить на 2 этапа, один из которых двигается, а другой - неподвижен. сумма первого и второго должна составлять 33. Я установил 17 для шага перемещения, но это зависит от вас.
Результат:
.slide {
width: 100%;
height: 80vh;
position: relative;
}
#slide-02 .image-rotator {
position: relative;
max-width: 300px;
height: 100%;
overflow: hidden;
border: 1px solid lime;
}
#slide-02.animate .image-rotator img {
position: absolute;
top: 0;
left: -450px;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
animation: imgRotator 9s ease-in-out infinite;
}
#slide-02.animate .image-rotator img:nth-child(2) {
animation-delay: -3s;
}
#slide-02.animate .image-rotator img:nth-child(3) {
animation-delay: -6s;
}
@keyframes imgRotator {
0% {
opacity: 0;
left: 450px;
}
17%, 33%{
opacity: 1;
left: 0;
}
50%, 100% { /* 33 + 17 = 50 */
opacity: 0;
left: -450px;
}
}<div class = "slide animate" id = "slide-02">
<div class = "image-rotator">
<img src = "https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt = "apple" >
<img src = "https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt = "bananas" >
<img src = "https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt = "cherries" >
</div>
</div>
Спасибо за вашу помощь. Ваши предложения действительно решают проблему последовательности / цикла. Но при такой продолжительности / задержках изображения не останавливаются. Итак, я восстановил свои ключевые кадры (15% и т. д.) С отключенными временными интервалами, и в цикле снова образовался гигантский промежуток. Пытаясь предотвратить перекрытие, я использовал линейную синхронизацию, но со значениями ступенчатой задержки результаты (jsfiddle.net/WhiskeyT/mw9ze8wq/1) все еще не получены. Любое понимание? Возможно, вы сможете подробнее рассказать, как к этому подойти, очень признательны