How to make infinite loop transforms

Questions
,
1

Hi,
I was trying to create some transform animation with SVG icons… but there is no option to loop transitions… Can you show me how to achieve this?
Here is an example - https://joya-template.webflow.io/
Here you can see the scroll-down arrow is moving on loop, also some star icons are rotating on loop. that’s what I want to achieve. tried with some CSS but didn’t work.

2

I’ve recoreded you a video on how you can create that, it requires a bit of custom CSS. Below is the code that you can just copy paste, and in video you will see where and how.

<style>
    @keyframes scroll {
        to {
            transform:translate(0px,80px);
        }
    }
</style>

animation:scroll 2s infinite;
1 Like
3

Thank you so much for explaining in detail. It helped a lot.

1 Like