CSS animation isn't working until click on Angular - html

Question

I was trying to build a auto sliding bar from right to left with an array of data in Angular. Currrently, the animation wasn't working until user click on it. I tried changedetectorref, setTimeout() and trigger click event manually, but nothing work. Please help me on solving this.
The observation is that the data fetched from backend are received and shown (this.offer has its correct value) but the animation is paused. After several seconds, the shown data disappears by itself. When user click the blank sliding bar, the function of clicking on a data triggers and the animation starts. Please let me know if any further information is required.
HTML Part
<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 Part
$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 part
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)
})
}