stranger: Problem mit "animation-delay"

Hallo,

ich habe ein Problem mit animation-delay im Slider unter der Rubrik animation. Ich habe das Beispiel von Selfhtml genommen. Im Beispiel wurden 3 Bilder für den Slider benutzt.

Ich habe 5 Bilder genommen und das Script angepasst. Bei animation-delay kann man den start angeben, wann eine animation starten soll. Wie gesagt mit 3 Bildern in dem Beispiel hat es geklappt.

Da hat die Animation nach 5 sek das 2. Bild gezeigt. Jetzt mit 5 Bildern kann ich eingeben was ich will er startet das Bild immer erst nach mindestens 10 sek oder noch später. Die folgenden Animationen starten richtig. Sodaß immer das ertse Bild sehr lange zu sehen ist. Wie kann man das Problem lösen?

Vielen Dank im voraus.

  1. Hallo stranger,

    Wahrscheinlich hast du etwas falsch gemacht ;-)

    Wie kann man das Problem lösen?

    Indem du erst einmal die Seite zeigst.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Vielen Dank für die schnelle Antwort. Hier ist das Script:

      <style type="text/css">
      <!--
      #buehne {
        position: relative;
      } 
      #buehne figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        -webkit-animation: wechseln 40s infinite;
        animation: wechseln 40s infinite;
      } 
      #buehne figcaption {
        position: absolute;
        left: 1em;
        bottom: 0.5em;
        z-index: 2;
      }
      @keyframes wechseln {
          0% {opacity: 1;}
         25% {opacity: 1;}
         40% {opacity: 0;}
         92% {opacity: 0;}
        100% {opacity: 1;} 
      } 
      @-webkit-keyframes wechseln {
         0% {opacity: 1;}
         25% {opacity: 1;}
         40% {opacity: 0;}
         92% {opacity: 0;}
        100% {opacity: 1;}
      }
      #buehne figure:nth-of-type(4) {
        -webkit-animation-delay: 8s;
        animation-delay: 8s;  
      }
      #buehne figure:nth-of-type(3) {
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
      }
      #buehne figure:nth-of-type(2) {
        -webkit-animation-delay: 24s;
        animation-delay: 24s;
      }
      #buehne figure:nth-of-type(1) {
        -webkit-animation-delay: 32s;
        animation-delay: 32s;
      }
      -->
      </style>
      </head>
      <body>
      <main>    
          <div id="buehne">	 
      	<figure>
              <img src="bilder/slider/bild5.jpg" alt="Text">
              <figcaption>abends</figcaption>
            </figure> 
      	<figure>
              <img src="bilder/slider/bild4.jpg" alt="Text">
              <figcaption>nachmittags</figcaption>
            </figure>
      	<figure>
              <img src="bilder/slider/bild3.jpg" alt="Text">
              <figcaption>mittags</figcaption>
            </figure>
      	<figure>
              <img src="bilder/slider/bild2.jpg" alt="Text">
              <figcaption>vormittags</figcaption>
            </figure>
            <figure>
              <img src="bilder/slider/bild1.jpg" alt="Text">
              <figcaption>morgens</figcaption>
            </figure>          
          </div>    
        </main>
      </body>
      </html>
      
      1. Hallo stranger,

        hat damit zwar nichts zu tun, aber

        • die Angabe type="text/css" ist nicht notwendig
        • ebenso das Auskommentieren des CSS-Codes

        Ein online-Beispiel ist wesentlich hilfreicher.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. Hallo stanger

    ich habe ein Problem mit animation-delay im Slider unter der Rubrik animation. Ich habe das Beispiel von Selfhtml genommen. Im Beispiel wurden 3 Bilder für den Slider benutzt.

    Ich habe 5 Bilder genommen und das Script angepasst. Bei animation-delay kann man den start angeben, wann eine animation starten soll. Wie gesagt mit 3 Bildern in dem Beispiel hat es geklappt.

    Du solltest auch @keyframes wechseln auf 5 Bilder anpassen, also andere %-Werte verwenden. 8 Sekunden sind 20% von 40 Sekunden, also wäre etwa 16% {opacity: 1;} und 20 % {opacity: 0;} angemessen.

    Mit besten Grüssen
    Richard

    1. Hallo Richard, das mit den @keyframes hat damit nichts zu tun. Da das die Überblendung für jedes einzelne Bild ist. Also die Animation dauert 40 sek, bei 5 Bidern sind das 8 sek pro Bild und das heißt das beim @keyframe sind also 8 sek =100%. Dadurch das es 5 Bilder sind ist der Blendübergang sogar etwas ruhiger da die 100% auf 8sek verteilt werden anstatt bei 3 Bildern und 5 sek pro Bild wie in dem Beispiel. Ich habe bei dem Start des 2. Bildes verschiedene Startzeiten getestet, immer hat das 2. Bild erst ab 10 sek oder später angefangen, selbt als ich für das 1. Bild ein eigenes animation-delay geschriben habe und auf 1sek gesetzt habe wurde das ignoriert und das 2. Bild startet erst nach 12 sek. Das Startzeit vom 2. Bild wird einfach ignoriert. Habe keine Erklärung dafür.

      Gruß Stranger

      1. Hallo Stranger

        das mit den @keyframes hat damit nichts zu tun. Da das die Überblendung für jedes einzelne Bild ist.

        @keyframes wechseln steuert die gesamte Animation, ist also entscheidend.

        Also die Animation dauert 40 sek, bei 5 Bidern sind das 8 sek pro Bild und das heißt das beim @keyframe sind also 8 sek =100%.

        Nein, 100% ist die Dauer der gesamten Animation, also 40 Sekunden. Nach 8 Sekunden, also 20% soll das zweite Bild sichtbar sein. Für die Überblendung könnten die opacity-Werte etwa so gesetzt werden: 18% {opacity: 1;} und 22 % {opacity: 0;}, das Überblenden würde dann 1 Sekunde dauern.

        Mit besten Grüssen
        Richard

        1. Hallo Richard, Danke für den weiteren Denkansatz, ja jetzt ist die Sache für mich klar, Deine Prozente haben gestimmt, habe dann nur noch den letzten Prozentbetrag angepasst auf 97% und es funzt.