如何为标签背景图片制作动画？

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;


}

上面的代码不起作用，它显示了我如何解决问题。失败惨了。

因此，基本上，我将渲染标签，将水印（圆圈）添加为标签的背景图像，然后在完全加载标签或其他事件时，添加动画类。

但是它不起作用。甚至没有接近的结果。

有人可以帮助我解决这个问题吗？谢谢您的光临。

约翰