Fading Effekt die zweite - erstes Bild sofort sichtbar

[de_Joerg]

Hi,

dank eurer Hilfe funktioniert meine fading Routine einwandfrei. Nun habe ich jedoch noch eine Frage:

Direkt nach dem Aufruf, soll das erste Bild einmalig sofort d.h. ohne einblenden erscheinen. Das habe ich mit dem Befehl

background:url(bild/bild01.jpg);

gelöst. Durch den hier fehlenden fading Effekt, wird dieses Bild in diesem Fall drei Sekunden länger dargestellt. Gibt es mit reinem CSS d.h. möglichst ohne Javascript aber evtl. mit PHP evtl. eine andere Möglichkeit, das erste Bild beim Aufruf sofort darzustellen und dabei die Zeitintervalle gleich zu halten?

Danke im voraus für Eure Hilfe

<style>
#stapel
{
width: 400px;
height: 300px;
background:url(bild/bild01.jpg);
}

#stapel img
{
position: absolute;
width: 400px;
height:300px;
opacity: 0;
}

#stapel img:nth-of-type(1)
{
animation: fade 60s ease-in-out infinite;
-webkit-animation: fade 60s ease-in-out infinite;
-o-animation: fade 60s ease-in-out infinite;
-moz-animation: fade 60s ease-in-out infinite;
-ms-animation: fade 60s ease-in-out infinite;
}

#stapel img:nth-of-type(2)
{
animation: fade 60s 10s ease-in-out infinite;
-webkit-animation: fade 60s 10s ease-in-out infinite;
-o-animation: fade 60s 10s ease-in-out infinite;
-moz-animation: fade 60s 10s ease-in-out infinite;
-ms-animation: fade 60s 10s ease-in-out infinite;
}

#stapel img:nth-of-type(3)
{
animation: fade 60s 20s ease-in-out infinite;
-webkit-animation: fade 60s 20s ease-in-out infinite;
-o-animation: fade 60s 20s ease-in-out infinite;
-moz-animation: fade 60s 20s ease-in-out infinite;
-ms-animation: fade 60s 20s ease-in-out infinite;
}

#stapel img:nth-of-type(4)
{
animation: fade 60s 30s ease-in-out infinite;
-webkit-animation: fade 60s 30s ease-in-out infinite;
-o-animation: fade 60s 30s ease-in-out infinite;
-moz-animation: fade 60s 30s ease-in-out infinite;
-ms-animation: fade 60s 30s ease-in-out infinite;
}

#stapel img:nth-of-type(5)
{
animation: fade 60s 40s ease-in-out infinite;
-webkit-animation: fade 60s 40s ease-in-out infinite;
-o-animation: fade 60s 40s ease-in-out infinite;
-moz-animation: fade 60s 40s ease-in-out infinite;
-ms-animation: fade 60s 40s ease-in-out infinite;
}

#stapel img:nth-of-type(6)
{
animation: fade 60s 50s ease-in-out infinite;
-webkit-animation: fade 60s 50s ease-in-out infinite;
-o-animation: fade 60s 50s ease-in-out infinite;
-moz-animation: fade 60s 50s ease-in-out infinite;
-ms-animation: fade 60s 50s ease-in-out infinite;
}

@keyframes fade
{
5%, 16.66%       {opacity:1;}
0%, 21.66%, 100% {opacity:0;}
}

@-webkit-keyframes fade
{
5%, 16.66%       {opacity:1;}
0%, 21.66%, 100% {opacity:0;}
}
</style>

<br>Anfang<br>
<div id="stapel">
<img src="bild/bild01.jpg">
<img src="bild/bild02.jpg">
<img src="bild/bild03.jpg">
<img src="bild/bild04.jpg">
<img src="bild/bild05.jpg">
<img src="bild/bild06.jpg">
</div>
<br>
Ende

[Arne Drews]

Zeitintervalle sind über CSS nicht möglich.
PHP kann Dir dabei auch nicht helfen, weil: PHP == serverseitig VOR Sendung an den Browser ( ohne OutputBuffering zu berücksichtigen )

[de_Joerg]

Ok, danke für die Antwort. Ist aber auch nicht so dramatisch )