Hi All,


I am using the animate interaction to cause an icon to bounce. This animation occurs once, I would like to have the icon continue to animate continuously until the user changes screen. How can I achieve this. 


I notice that outsystems was able to continuously repeat the animation in there example here so it must be possiable.

https://www.outsystems.com/outsystems-ui/patterns/mobile/Animate


  

Solution

Hi Anthony,

From what I was able to understand this Animate is made with CSS, and it seems you just need to add animation-iteration-count: infinite; in the animate class.

Hope this help

Solution

Thakns, I added the follwing CSS to my theme and it worked :D



.animate {
    -webkit-animation-duration: 1000ms;
            animation-duration: 1000ms;
    display: inline-block;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    visibility: hidden;
    width: 100%;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    will-change: transform;
-webkit-animation-iteration-count: infinite;
}

Did you validate that the last line was in fact loaded in the element?

Only now I've noticed that you said it worked :P