Ergebnis 1 bis 1 von 1

Thema: Kleine Slideshow ohne JS funktioniert nicht in Safari

  1. #1
    HTML Newbie
    Registriert seit
    29.08.2015
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard [erledigt]Kleine Slideshow ohne JS funktioniert nicht in Safari

    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>
    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;}
    }
    Hat sich erledigt habe den Fehler gefunden, Beitrag kann gelöscht werden.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Nissa3 (30.08.2015 um 20:13 Uhr) Grund: Hat sich erledigt, Fehler gefunden.

Ähnliche Themen

  1. Floats gehen im Firefox/Opera, nicht in Safari/Chrome/IE
    Von hüttenliesl im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 01.03.2013, 16:37
  2. Slideshow auf Webseite funktioniert nicht.?
    Von stormraider im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 16.03.2010, 19:38
  3. Flash Slideshow - Bilder laden online nicht
    Von DeSchroe im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 12.08.2009, 13:48
  4. Slideshow wird nicht angezeigt
    Von Posi im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 19.11.2008, 23:49
  5. Wieso funktioniert das kleine Script nicht??
    Von randyorton im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 25.08.2006, 07:19

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •