Как сделать наложение анимации css?

Question

[Ringil Endimion]

Подскажите, как сделать наложение кадров в анимации css:

<ul class="dsimageanimation" id="fonstyly">
    <li id="fonlink"><span id="fondrive"></span></li>
    <li id="fonlink"><span id="fondrive"></span></li>
    <li id="fonlink"><span id="fondrive"></span></li>
    <li id="fonlink"><span id="fondrive"></span></li>
</ul>

ul#fonstyly {
    list - style: none
}
.dsimageanimation {
    margin: 0; width: 100 %; height: 100 %; top: 0 px; left: 0 px; z - index: -1
}
.dsimageanimation li# fonlink span# fondrive {
    width: 100 %; height: 100 %; position: fixed; top: 0 px; left: 0 px; background - size: cover; background - repeat: no - repeat; background - attachment: fixed; background - position: 50 % 50 % ; opacity: 0; z - index: -1; - webkit - backface - visibility: hidden; - webkit - animation: imageAnimation 24 s linear infinite 0 s; - moz - animation: imageAnimation 24 s linear infinite 0 s; - o - animation: imageAnimation 24 s linear infinite 0 s; - ms - animation: imageAnimation 24 s linear infinite 0 s;animation: imageAnimation 24 s linear infinite 0 s
}
.dsimageanimation li# fonlink: nth - child(1) span# fondrive {
        background - image: url('/style/img/header-aa.jpg')
    }
.dsimageanimation li# fonlink: nth - child(2) span# fondrive {
        background - image: url('/style/img/header-bd.jpg'); - webkit - animation - delay: 6 s; - moz - animation - delay: 6 s; - o - animation - delay: 6 s; - ms - animation - delay: 6 s;
        animation - delay: 6 s
    }
.dsimageanimation li# fonlink: nth - child(3) span# fondrive {
        background - image: url('/style/img/header-pw.jpg'); - webkit - animation - delay: 12 s; - moz - animation - delay: 12 s; - o - animation - delay: 12 s; - ms - animation - delay: 12 s;
        animation - delay: 12 s
    }
.dsimageanimation li# fonlink: nth - child(4) span# fondrive {
        background - image: url('/style/img/header-tera.jpg'); - webkit - animation - delay: 18 s; - moz - animation - delay: 18 s; - o - animation - delay: 18 s; - ms - animation - delay: 18 s;
        animation - delay: 18 s
    }
@ - webkit - keyframes imageAnimation {
        0 % {
            opacity: 0; - webkit - animation - timing - function: ease - in
        }
        8 % {
            opacity: 1; - webkit - animation - timing - function: ease - out
        }
        17 % {
            opacity: 1
        }
        25 % {
            opacity: 0
        }
        100 % {
            opacity: 0
        }
    }
@ - moz - keyframes imageAnimation {
        0 % {
            opacity: 0; - moz - animation - timing - function: ease - in
        }
        8 % {
            opacity: 1; - moz - animation - timing - function: ease - out
        }
        17 % {
            opacity: 1
        }
        25 % {
            opacity: 0
        }
        100 % {
            opacity: 0
        }
    }
@ - o - keyframes imageAnimation {
        0 % {
            opacity: 0; - o - animation - timing - function: ease - in
        }
        8 % {
            opacity: 1; - o - animation - timing - function: ease - out
        }
        17 % {
            opacity: 1
        }
        25 % {
            opacity: 0
        }
        100 % {
            opacity: 0
        }
    }
@ - ms - keyframes imageAnimation {
        0 % {
            opacity: 0; - ms - animation - timing - function: ease - in
        }
        8 % {
            opacity: 1; - ms - animation - timing - function: ease - out
        }
        17 % {
            opacity: 1
        }
        25 % {
            opacity: 0
        }
        100 % {
            opacity: 0
        }
    }
@ keyframes imageAnimation {
    0 % {
        opacity: 0;animation - timing - function: ease - in
    }
    8 % {
        opacity: 1;animation - timing - function: ease - out
    }
    17 % {
        opacity: 1
    }
    25 % {
        opacity: 0
    }
    100 % {
        opacity: 0
    }
}

Пытаюсь уменьшить delay, кадры 1-4 накладываются друг на друга, но при переходе с 4 кадра на 1 - пустой экран на несколько секунд. Если при этом уменьшить imageAnimation, то просто время анимации становится меньше и кадры не накладываются друг на друга.
сайт

Answer 1

[Роман]

а не связано это с тем, что у вас opacity = 0 слишком "длинное"?

Comments

[Ringil Endimion]

Да, заменил анимацию на

0%{opacity:0;}
    10%{opacity:1;}
    33% {opacity:1;}
    43% {opacity:0;}
    100%{opacity:0;}

и теперь кадры анимации перелистывается плавно с наложением.
Спасибо.