Setting up better Animations

[Acorn]

This is going to be a mini-series.

Episode 1 is CSS - Controlled Animations.xar

GaryP has bemoaned the lack of exact timing control.
This example has duration and delay down to the millisecond.

GaryP also questioned, as I do, what Xara's solutions are all placements.
Do advise if any Reveal animation actually disappears.
If you use hinge and the pageXYZOs, then we have a built-in, but unaccessed, solution.

The principle is that Xara dials in ani.css with any animation.
You may have to add <link rel="stylesheet" href="index_htm_files/ani.css"> into Website HTML (code (head) if you are not using any animation at present.
This is over 6-years stale and needs a refresh. [Another Episode]

I have listed all of the keyframe names (Animation), which you can add as ClassNames along with animated to get a basic animation going into a special htmlclass="..." Name added to the shape.
Xara used other ClassNames for duration from 0.1s to 5s (xr_ad01 to xr_ad50); these can be part of the htmlclass.

I have augmented the duration with a ClassName of ani_time, where a fixed value can be saved that suits your design.
Ditto for a delay: ani_delay.
You can extend these to other values.
These are also saved in Website HTML (code (head).
They are appended to the htmlclass, everything separated by spaces.

I placed GaryP's special shape in a hidden layer, so you could read the detail it is covering.

The Replay button is not part of the reading in this Episode. [Maybe later]

Acorn