Setting up better Animations

[Egg Bramhill]

You're cooking on gas Acorn. I can't keep up with you!

[Egg Bramhill]

Just to ensure you know we are here and following you, here's my experimenting with your great input.

[Acorn]

Just to ensure you know we are here and following you, here's my experimenting with your great input.

I think you have it Egg!

The off-page button is not needed as you have applied a SlideinLeft animation to the LB shape.
Neither is the link to ani.css for the same reason.

To get the others to replay on "reveal", I might add FadeIn&0 to UL, UR & BR shapes as well.

I would use the full property presentation when adding multiple animations, otherwise
{ animation: pageRotateFlipBI 2.5s ease-in-out 0s 1 forward; } works well.

I can't wait until you start tweening with keyframes.

Acorn

[Egg Bramhill]

I can't wait until to start tweening with keyframes.

You can't wait until......?

I tried the link to ani.css in the head first and this didn't work but I forgot to remove it.
The button worked prior to giving me giving it a reveal attribute.

[Acorn]

Egg, I entered 'to' instead of 'you'.

Corrected in OP.

Acorn

[Acorn]

EPISODE 5

This is all around handling mousing out of an animation; Xara's approach chops it dead so it is very abrupt and disconcerting.

The CSS Code in the example file, CSS - CoX.xar, adds an animation into default ClassName and a different one into its :hover pseudo-attribute.
All prior constructions still apply.

The end result is chaotic but harder to force jumps.

A further example to implement:

.HeadShake {
animation: headShake;
animation-duration: 3.27s;
animation-iteration-count: 2;
}
.HeadShake:hover {
animation: heartBeat;
animation-duration: 1.62s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: forwards;
background-color: green !important;
}

This throws in an immediate hover colour change, which could have been set up as a slower transition by adding ' transition: all 5.37s;' at the end of the first-bracketed HeadShake code.
All timings are random and there for you to tweak.

Acorn

[gcellison]

Acorn, I'm just today looking at the posts in this thread and at the files you attached. This is really an awesome way to "force" the Xara software to do precisely what you want. Thanks, kudos and congrats!