OH3 Widget .. need advice for animation

I would like to create a Solar Power Widget with Solar panel, batteries, external network and home icons similar to Tesla app.
I also would like to create an animation to show where the power direction (i.e. from solar panels to home/network/batteries or from batteries or network to home when no solar plan)

For testing purpose I tried to move an f7-icon horizontally for infinite times but without success.

              f7: arrowtriangle_right_fill
                color: red
                animation: transform infinite
                animation-duration: 4s
                transform: from translateX(0px) to translateX(100px)
                transform-origin: left center

I don’t know how to set “infinite” and how to set “from … to”
Thanks for your Help