Создать выделение в nativescript

Question

Используя css, я могу создать простое marquee, добавив анимацию к left свойству https://codepen.io/jamesbarnett/pen/kfmKa.Но я не могу сделать то же самое с nativescript, потому что он пока не поддерживает left в анимациях https://docs.nativescript.org/ui/animation-css.Поэтому я пытаюсь создать ту же анимацию, используя transform, но не могу определить точные значения duration и transform, поскольку содержимое marquee будет создаваться динамически.

<AbsoluteLayout width="100%" class="marquee">
    <StackLayout orientation="horizontal" zIndex="89">
        <StackLayout id="lytAdvertisementBar" orientation="horizontal" class="advertisement-bar">
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
        </StackLayout>
    </StackLayout>
    <Image src="res://icon_custom_offers" right="20" zIndex="99"/>
</AbsoluteLayout>

CSS:

@keyframes kf-marquee {
    from { transform: translate(-100%, 0); }
    to   { transform: translate(100%, 0); }
}

.advertisement-bar {
    transform:translateX(100%);
    animation-name: kf-marquee;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1,1,1,1);
}
.marquee{
    background-color: #414042;
    width: 100%;
}
.advertisement-bar{
    left: 0;
    background-color: #414042;
    margin: 1 0;
    padding: 3 0;
}

Как я могу исправить свой код, чтобы я мог иметь marquee анимацию с использованием css / js в nativescript и иметь постоянную скорость анимации (динамическая продолжительность)?