CSS3 Slider timing niet correct

[AvWijk]

Ik heb een eenvoudige CSS3 slider gebouwd, maar ondanks wat in de code staat is de timing niet goed. Dit komt vooral voor bij meer dan 4 images, ook al zijn ze van te voren ge-preload: als de sequence opnieuw begint is er steevast een plaatje wat te lang in beeld blijft, waardoor de volgende slide te kort in beeld is.

Ik ben er nog niet achter wat precies het probleem is. De slideshow kan worden ingesteld op duratie X per slide, te vermenigvuldigen met het totaal aantal slides, in dit geval dus 42 sec (7 sec per slide, 6 slides totaal)

HTML:

<section id="wrap">
                                                           
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:0s; animation-delay:0s; background:url('https://blaat.io/plaatje/Zonneschermen1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:7s; animation-delay:7s; background:url('https://blaat.io/plaatje/Veranda1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:14s; animation-delay:14s; background:url('https://blaat.io/plaatje/Markiezen1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:21s; animation-delay:21s; background:url('https://blaat.io/plaatje/Pergolazonwering1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:28s; animation-delay:28s; background:url('https://blaat.io/plaatje/Shutters1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                                 <figure class="" style="-webkit-animation:ZWslideShow 42 linear infinite 0s; animation:ZWslideShow 42s linear infinite 0s;  -webkit-animation-delay:35s; animation-delay:35s; background:url('https://blaat.io/plaatje/Rolluikactie1280px.jpg') no-repeat center center; background-size:cover;"></figure>
                    
</section>

Cascading Stylesheet:

 @-webkit-keyframes ZWslideShow {
    0%      { opacity:0; -webkit-transform:scale(1); }
    0.05%   { opacity:1; }
    29.95%  { opacity:1; }
    30% { opacity:0; -webkit-transform:scale(1.5); }
    100%{ opacity:0; -webkit-transformm:scale(1); }
}
   
@keyframes ZWslideShow {
    0%  { opacity:0; transform:scale(1); }
    0.05%   { opacity:1; }
    29.95% { opacity:1; }
    30% { opacity:0; transform:scale(1.5); }
    100%{ opacity:0; transform:scale(1); }
}

[q-enf0rcer.1]

Heb je ergens een voorbeeld staan van het geheel? Misschien dat browser lag een ongewenste vertraging oplevert die niet meetelt voor de volgende animatie oid.