html - CSS-animation fungerar inte förrän man klickar på Angular

Jag försökte bygga en automatisk glidande bar från höger till vänster med en array av data i Angular. För närvarande fungerade inte animationen förrän användaren klickade på den. Jag försökte changeddetectorref, setTimeout() och att manuellt trigga klickhändelsen, men inget fungerade. Vänligen hjälp mig att lösa detta.

Observationen är att de data som hämtas från backend tas emot och visas (this.offer har sitt korrekta värde) men animationen är pausad. Efter flera sekunder försvinner de visade uppgifterna av sig själva. När användaren klickar på den tomma glidande stapeln triggas funktionen för att klicka på en data och animationen startar. Vänligen meddela om ytterligare information behövs.

HTML-del

    <div class="ticker-wrap bg-black">
        <div class="ticker py-2.5" id="bar-part-1">
            <a class="ticker__item" [id]="'talent-' + o.uniqueCode" [href]="'/talent/' + o.uniqueCode" (click)="openTalentDetailDialog(o.uniqueCode)"
                *ngFor="let o of offers">
                <div class="flex-col content">
                    <strong>{{o.uniqueCode}}</strong>
                </div>
            </a>
        </div>
        <div class="ticker py-2.5" id="bar-part-2">
            <a class="ticker__item" [href]="'/talent/' + o.uniqueCode" (click)="openTalentDetailDialog(o.uniqueCode)"
                *ngFor="let o of offers">
                <div class="flex-col content">
                    <strong>{{o.uniqueCode}}</strong>
                </div>
            </a>
        </div>
    </div>

CSS-del

$duration: 40s;

@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.ticker-wrap {

    // position: fixed;
    z-index: 100;
    // bottom: 0;
    width: 100%;
    overflow: hidden;
    // height: 4rem;
    // padding-left: 100%;
    box-sizing: content-box;
    white-space: nowrap;
    min-height: 64px;

    .ticker {

        // display: inline-block;
        display: inline-flex;
        // height: 4rem;
        // line-height: 4rem;
        // white-space: nowrap;
        // padding-right: 100%;
        box-sizing: content-box;

        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-name: ticker;
        animation-name: ticker;
        -webkit-animation-duration: $duration;
        animation-duration: $duration;

        &__item {

            display: inline-block;

            padding: 0 2rem;
            // font-size: 2rem;
            color: white;

            cursor: pointer;

            .content {
                max-width: 450px;
                min-width: 450px;
                white-space: pre-wrap;
            }

            &:hover {
                text-decoration: underline;
            }

        }

    }

    &:hover {
        .ticker {
            animation-play-state: paused;
        }
    }
}

TypeScript-del

    loadRecentOffers() {
        console.log('loadRecentOffer is triggered');

        this._businessService.getRecentOffers().subscribe(async o => {
            console.log('recent offers: ', o);
            await Promise.all(o.map(oo => {
                oo.time = moment(new Date(oo.createdAt)).fromNow();
            }));
            this.offers = o;

            // this._matSnackBar.open('offer applied', 'Close');
            setTimeout(() => {
                this._cdr.markForCheck();
                this._cdr.detectChanges();
                // this._matSnackBar.open('cdr triggered', 'Close');
            }, 100)
        })
    }