Kleine Slideshow ohne JS funktioniert nicht in Safari

Nissa3

Hallo zusammen,

ich habe ein Problem mit meiner Slideshow. Habe sie in IE, Opera, Chrome, Firefox und Safari getestet. Überall läuft sie ohne Probleme nur eben im Safari nicht. Dort sehe ich lediglich die Hintergrundfarbe des div. Habe über die Suche hier leider nichts gefunden. Benutze noch eine andere Slideshow auf der Seite die funktioniert in allen Browsern ohne Probleme, zuerst hatte ich auch das -webkit- vergessen aber nachdem ich das nun eingefügt habe funktioniert es trotzdem nicht. Hab ich es noch irgendwo vergessen oder was anderes?

Anbei der Quelltext

HTML

Code

<div id="stapel">
    <figure>
        <img src="bild1.jpg">
    </figure>
    <figure>
        <img src="bild2.jpg">
    </figure>
    <figure>
        <img src="bild3.jpg">
    </figure>
    <figure>
        <img src="bild4.jpg">
    </figure>
    <figure>
        <img src="bild5.jpg">
    </figure>
</div>

Alles anzeigen

CSS

Code

/* Slideshow Logos */
#stapel {
    position: relative;
    background: #000;
    height: 45px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}


#stapel figure {
    position: absolute;
    margin: 0;
    opacity: 0;
}


#stapel figcaption {
    position: relative;
    color: #444;
    font: 1.5em/2.5 Verdana, Arial, serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 2.9em;
    width: 12.4em;
    bottom: 80px;
    left: -320px;
    transition: .5s;
}


#stapel:hover figcaption {
    left: 0;
}
#stapel figure:nth-of-type(1) {
    -webkit-animation: bild 60s ease-in-out infinite;
    -o-animation: bild 60s ease-in-out infinite;
    -moz-animation: bild 60s ease-in-out infinite;
    animation: bild 60s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
    -webkit-animation: bild 60s 12s ease-in-out infinite;
    -o-animation: bild 60s 12s ease-in-out infinite;
    -moz-animation: bild 60s 12s ease-in-out infinite;
    animation: bild 60s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
    -webkit-animation: bild 60s 24s ease-in-out infinite;
    -o-animation: bild 60s 24s ease-in-out infinite;
    -moz-animation: bild 60s 24s ease-in-out infinite;
    animation: bild 60s 24s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
    -webkit-animation: bild 60s 36s ease-in-out infinite;
    -o-animation: bild 60s 36s ease-in-out infinite;
    -moz-animation: bild 60s 36s ease-in-out infinite;
    animation: bild 60s 36s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
    -webkit-animation: bild 60s 48s ease-in-out infinite;
    -o-animation: bild 60s 48s ease-in-out infinite;
    -moz-animation: bild 60s 48s ease-in-out infinite;
    animation: bild 60s 48s ease-in-out infinite;
}


@-webkit-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-webkit-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@-moz-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-moz-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@-o-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-o-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}

Alles anzeigen

Hat sich erledigt habe den Fehler gefunden, Beitrag kann gelöscht werden.

Tags