Почему это правило CSS @keyframes не затухает? - PullRequest
Новая
       41

Почему это правило CSS @keyframes не затухает?

0 голосов
/ 28 февраля 2019

Я пытаюсь создать очень простое слайд-шоу, которое затухает между каждым изображением.Проблема состоит в том, что изображения постепенно исчезают до , следующее изображение начинает постепенно исчезать.

Я хотел, чтобы каждое изображение появлялось в течение 1 секунды, осталось еще 10секунд, а затем исчезают в течение 1 секунды - всего 12 секунд.

@keyframes были рассчитаны путем деления длительности анимации на 100, что привело к 1,81% за каждую секунду.

Задержка анимации составляет 11 с, что вызывает мое замешательство, так как следующее изображение должно исчезать, когда последние изображения исчезают.

Если кто-нибудь сможет пролить свет на то, что я сделал неправильно, то я быбудьте очень благодарны.

HTML: 

<!doctype html>
<html>
    <body>
        <main>
            <div id="cf">
                <img src="https://placeimg.com/640/480/animals">
                <img src="https://placeimg.com/640/480/nature">
                <img src="https://placeimg.com/640/480/tech">
                <img src="https://placeimg.com/640/480/people">
                <img src="https://placeimg.com/640/480/sepia">
            </div>
        </main>
    </body>
</html>

CSS: 

@keyframes crossFade{
    0%{opacity: 0;}
    1.81%{opacity: 1;}
    18.18%{opacity: 1;}
    19.98%{opacity: 0;}
    100%{opacity: 0;}
}

#cf img{
    position:absolute;
    left:0;
    opacity: 0;
    animation-name: crossFade;
    animation-duration: 55s;
    animation-iteration-count: infinite;
}

#cf img:nth-last-of-type(1){
    animation-delay: 0s;
}

#cf img:nth-last-of-type(2){
    animation-delay: 11s;
}

#cf img:nth-last-of-type(3){
    animation-delay: 22s;
}

#cf img:nth-last-of-type(4){
    animation-delay: 33s;
}

#cf img:nth-last-of-type(5){
    animation-delay: 44s;
}

Ссылка на Codepen: https://codepen.io/Musicky/pen/YgyOPm

1 Ответ

0 голосов
/ 28 февраля 2019

Я изменил ваши проценты и продолжительность.Это будет отображаться так, как вы ожидаете.

Возможно, вы захотите отрегулировать длину начала первого перехода, но ваш оригинал не перекрывался.Проще определить время, когда они делятся.Не сказать, что это невозможно сделать, но сложнее реализовать 

@keyframes crossFade{
    0%{opacity: 0;}
    10%{opacity: 1;}
    20%{opacity: 1;}
    30%{opacity: 0;}
    100%{opacity: 0;}
}
#cf img{
    position:absolute;
    left:0;
    opacity: 0;
    animation-name: crossFade;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}
#cf img:nth-last-of-type(1){
    animation-delay: 0s;
}
#cf img:nth-last-of-type(2){
    animation-delay: 10s;
}
#cf img:nth-last-of-type(3){
    animation-delay: 20s;
}
#cf img:nth-last-of-type(4){
    animation-delay: 30s;
}
#cf img:nth-last-of-type(5){
    animation-delay: 40s;
}
<div id="cf">
    <img src="https://placeimg.com/640/480/animals">
    <img src="https://placeimg.com/640/480/nature">
    <img src="https://placeimg.com/640/480/tech">
    <img src="https://placeimg.com/640/480/people">
    <img src="https://placeimg.com/640/480/sepia">
</div>
...