Как анимировать фоновое изображение Label?

Question

Моя проблема

У меня простой дизайн с двумя надписями на экране, одна под другой.Каждый ярлык имеет 3 круга, которые мне нужно анимировать по диагонали.Когда круг (ы) достигает границы своей метки, он выходит сверху и зацикливается.(см. ужасную диаграмму)

Мои неудачные попытки

Что ж, я перепробовал все, что мог придумать.Я использовал этот подход:

XML

<Label id="Label1" class="ticket-font watermark" height="150" textAlignment="center" textWrap="true" text=" 1 Unlimited" backgroundColor="#f25092" tap = "onTap"/>
   <Label id="Label2" class="ticket-font2 watermark2" height="150" textAlignment="center" textWrap="true" text="Monthly Pass" backgroundColor="#ed166e" tap = "onTap"/>

CSS

.an1 {
    animation-name: backAnimate;
    animation-duration: 1000;
}
@keyframes backAnimate{
    from { transform: translate(0, 0); }
    to { transform: translate(150, 320); }
}

.watermark {

    background-image: url("~/images/water.png");
    background-repeat: no-repeat;
    padding-left: 8px;
    background-position: left top;


}

выше не работает код,это показывает, как я пытался решить мою проблему.Он потерпел неудачу.

Таким образом, я бы сделал метки, добавил бы водяные знаки (круги) в качестве фонового изображения для метки, а затем, когда он был полностью загружен, или какое-то другое событие, я бы добавил класс анимации..

Но это не работает.Нет даже близких результатов.

Может кто-нибудь помочь мне с этой проблемой?Спасибо за поиск.

Джон