Hi Leute,
ich habe mit Hilfe von CSS3 eine Slideshow gebastelt, welcher ich ungefähr in der Mitte anhelten und nach 10s fortsetzen will. Gibt es hier eine Möglichkeit, das ohne JS zu realisieren? Ich bekomme es einfach nicht hin. Er fängt an, wie er soll, stoppt für vielleicht 0.5s und geht dann weiter.
Der Quellcode sieht so aus:
div.slideshow_headline {
width: fit-content;
animation: slideshow 5s ease-in-out 0s infinite;
border:0px solid #000;
}
h2.slideshow_headline {
position: absolute;
opacity: 0;
animation: slideshow 5s ease-in-out 0s infinite;
border:1px solid #000;
}
div.slideshow_headline h2:nth-child(1) {
animation-delay: 0s;
}
div.slideshow_headline h2:nth-child(2) {
animation-delay: 10s;
}
div.slideshow_headline h2:nth-child(3) {
animation-delay: 20s;
}
@keyframes slideshow {
0% {
right: 0;
opacity: 0;
}
25% {
opacity: 1;
}
50% {
right: 50%;
opacity: 1;
}
75% {
opacity: 1;
}
100% {
right: 100%;
opacity: 0;
}
}
...
<div class="slideshow_headline">
<h2 class="slideshow_headline">Headline1</h2>
<h2 class="slideshow_headline">Headline2</h2>
<h2 class="slideshow_headline">Headline3</h2>
</div>
Vielen Dank für die Hilfe.
Schönen Sonntag noch
