Animation funktioniert nicht

  • 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);

    }

    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!