stranger: Problem mit "animation-delay"

Beitrag lesen

SELF-Forum

Problem mit "animation-delay"

stranger (Versionen)
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln