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