Hijacking Xara's Reveal Web Animations

[Acorn]

animate.css is basically a collection of @keyframes animations that are a collection of styles controlled by the percentage duration values.
Tweening, smooth transitions, occurs in between these values.
The time, delay, speed curve, frequency and direction can be invoked separately or in a shorthand command:

animation: example 5s linear 2s infinite alternate;
means
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;

Once started, an animation acts as a block and only through JavaScript (I use anime.js for this need) can you determine where in the animation things have reached.
The trigger to start is either including an overridden Xara Reveal Web Animation so it is launched with it is visible or on page load.

The failing this approach has is the abrupt starting and stopping of the animation.

Now CSS also has another mechanism, the transition.
The main differences are transitions are a one-step change & importantly, can be reversed out gracefully.

Xara uses the animate.css library for mouseover Effects.
Try a Slow Rubber band and in Preview mouse over and back out while the Effect is happening - you will see the abrupt stop.

You are also limited to a maximum 5-second Effect.
You can hijack these mouseover Effects by adding htmlclass="animated infinite" as a special Name for the object(s).

I prefer adding :hover to the CSS selector: e.g., <style> .animated:has(.rwa040):hover { animation: hinge; } </style>
Now whatever Xara Effect you initially applied will be acted on and your hijack will only occur on mouseover.
So setting Xara to Fade In & zero seconds will give you the same as Xara's Mouse-over effect but will access to all 153 effects and can delay them too.
The bonus is you can also set up a normal Xara Reveal effect or even roll your own.

Acorn