How to create loop with hover effect?

I want to add interactive animation on my site:

  1. 1/2 part of animation must be on loop by default
  2. 2/2 part of animation is for hover interaction: on hover plays forward to the last frame and stops, when cursor takes away, animation plays backward and returns to loop.

I made simple animation below, to show how it should works.

I’m really beginner here, I know how to make basic interactive animations like loop or hover, but I can’t merge this interactions in code.

My code looks like this:

    actions: [
            state: 'loop',
            transition: 'hover',
            frames: '0, 249'
            state: 'none',
            transition: 'hold',
            frames: '250, 369'


I guess mode “chain” here is wrong.
Can someone help me here, please?

Thanks in advance!!

In hope that someone answer :pray: