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

Question

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

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

Я хотел, чтобы каждое изображение появлялось в течение 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

0

html css animation cross-fade

Источник

user11106155 28 фев '19 в 16:01

1 ответ

Другие вопросы по тегам html css animation cross-fade

user10787507 28 фев '19 в 16:32 2019-02-28 16:32 · Answer 1 · 2019-02-28 16:32

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

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

@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>