• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe - Animation Text in dauerschleife anzeigen lassen funktioniert nicht

8lyd

Neues Mitglied
Hey, ich habe eine animation erstellt und möchte 3 texte im Wechsel in einer dauerschleife laufen lassen. Der anfang sieht gut aus aber die animation wenn sie einmal durchgelaufen ist läuft danach nur noch mit dem letzten taxt als dauerschleife weiter, wie bekomme ich es hin das alle animationen im wechsel als dauerschleife laufen?

HTML CODE:

<div class="top-bar rotatingText d-block ">
<nav class="top-bar-nav rotatingText-content">
<div class="top-bar-links rotatingText-description">
<span class='rotatingText-adjective emz-info-icon'>text 1</Span>
<span class='rotatingText-adjective emz-truck-icon'>text 1</Span>
<span class='rotatingText-adjective emz-info-icon'>text 3</Span>
</div>
</nav>
</div>

SCSS CODE:

.rotatingText {
font-style: italic;
font-size: .3125rem;
text-align: center;
}

.rotatingText-adjective {
padding-top: 0;
font-size: .9375rem;
font-style: normal;
font-weight: 500;
left: 0;
margin-bottom: 0;
margin-top: .375rem;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
text-transform: none;
top: 0;
color: #b79c66;
}

.rotatingText-adjective:nth-of-type(1) {
animation-name: rotate;
animation-duration: 1.5s;
animation-delay: 0.5s;
}

.rotatingText-adjective:nth-of-type(2) {
animation-name: rotate;
animation-duration: 1.5s;
animation-delay: 1.75s;
}

.rotatingText-adjective:nth-of-type(3) {
animation-name: rotate-last;
animation-duration: 1.5s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}

@keyframes rotate {
0% {
opacity: 0;
transform: translate3d(0, 3.125rem, 0);
}

20%, 80% {
opacity: 1;
transform: translate3d(0, 0, 0);
}

100% {
opacity: 0;
transform: translate3d(0, -1.5625rem, 0);
}
}

@keyframes rotate-last {
0% {
opacity: 0;
transform: translate3d(0, 3.125rem, 0);
}

50%, 100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
 
Werbung:
Werbung:
Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.
 
Zurück
Oben