CSS @keyframes myfirst

[bcmIT]

Guten Tag

Ich habe folgendes Problem:
Ich möchte auf meiner Webseite ein div einbauen in welchem sich Bilder wechseln. Dies versuchte ich mit dem CSS 3 element @kexframes myfirst umzusetzen, da ich keine JavaScript Kenntnisse habe.
Mein Problem ist nun das das ganze auf einer Seite super funktioniert, es werden die sich wechselnden Bilder werden aber für aller andern Unterseiten ebenfalls übernommen.

Ich hoffe Ihr versteht mein Problem


Das CSS sieht so aus:
#headerindex,#headerich{width:100%;height:100%;background:red;}



#headerindex
{-webkit-animation:myfirst 25s; /* Safari and Chrome */}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background-image: url('hobby1.jpg');}
25% {background-image: url('hobby2.jpg');}
50% {background-image: url('hobby3.jpg');}
100% {background-image: url('ich1.jpg');}
}



#headerich
{-webkit-animation:myfirst 25s; /* Safari and Chrome */}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background-image: url('ich1.jpg');}
25% {background-image: url('ich2.jpg');}
50% {background-image: url('hobby3.jpg');}
100% {background-image: url('hobby5.jpg');}
}

Vielen Dank

 

[Daaron]

Wenn alle Seiten eine der beiden IDs im Code haben, dann wirkt die jeweilige Deklaration natürlich.

So schön Keyframes aber auch sind, praktisch sind sie noch nicht. Der Browser-Support ist noch zu niedrig. Eine JS-Lösung wäre besser. Such dir einfach irgend einen Slider, z.B. auf jQuery - Basis. Das ist alles ziemlich einfach.

 

[bcmIT]

Ne eigentlich habe ich im HTML Code jeweils immer nur eine von beiden ID's geöffnet.

Aber trotzdem Vielen Dank-