STUDIO's animation feature allows the box to be transformed to a desired state with a transition between two points.

In the Motion tab, there are three options for the box, move/rotate/scale you can set up the transformations. For example, change the Conditional styles on the right side of the style bar to "Hover" and change the

When you hover over the box, the animation which moves 50 px upward and tilts 20° clockwise, 1.5 times size will be set up.

In the Motion tab, you can choose what kind of slowness, speed, and the transformations. By default, the "ease" transition curve, time of 300, and delay of 0 are applied, and this is a state the transformations of a natural slow animation over 0.3 seconds.

The transition curve represents the slowness of the transformation relative to time. The more horizontal the curve is, the more gradual the transition is. The more vertical the curve is, faster the transition is.

When you open the transition panel, there are 11 basic transition curves that can be used in a basic way, and you can select a curve that is close to your image.
If you want to be more particular, pull on the handles extending from both endpoints of the curve at the bottom of the panel to draw any slack.

In the "Duration" column, you can set the number of milliseconds the animation should take. The larger the number, the slower it moves; the smaller the number, the quicker the transition.

In the "Delay" column, you can set the amount of delay in starting the animation from the trigger. Again, the unit of measurement is milliseconds. For example, if you set the delay to "500" in the box, the transition begins after 0.5 seconds you mouse over the box.

You can set an animation of mouseover an element using the ":hover" condition.

You can animate an element by setting the state just before it appears in the "&appear" condition and by leaving the condition blank and setting the transition to normal.

animation motion rotaion