How to make css animation overlay?

Question

css

How to overlay frames in css animation:

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

I'm trying to reduce the delay, frames 1-4 are superimposed on each other, but when moving from frame 4 to frame 1 - a blank screen for a few seconds. If you reduce imageAnimation at the same time, then just the animation time becomes shorter and the frames do not overlap.
website

Answer 1

Isn't it due to the fact that your opacity = 0 is too "long"?