一幅动画图像，translateX反应幼稚并重复

Question

如何为translateX动画，就像这样，在有限的重复中反应

Answer 1

您可以使用css和样式组件props

background-image: url(...);
background-repeat-y: no-repeat;
background-position-x: ${props => props.positionPercentage};