Egg, I asked for access to the file so I could look at it.
Acorn
Printable View
Here's a final version created in Saola Animate. I like the fact that Saola retains svg's as svg's so you can size them up or down with no loss of definition and it's only 55Kb's. Unfortunately I created this one one an 800 x 600 px page whilst the size of the animation is only 200 x 250 px but I can't see anyway to reduce the page size to match in Saola. Said I had a love hate relationship with it ;)
I attach a xar file containing a mock up. Just preview.
Thanks Paul
Paul, Acorn, Egg:
Sorry I've been slow to reply, and slower to understand.
I am very grateful that you have done everything you've done to help me with this, I've just bdden really busy with work.
In the end, I made a number of newbie errors in designing a CSS Animation approach.
The main one was that I used absolute units (pixels) so all the translations are fixed so the end result cannot be easily scaled. Similar problem to Egg, I suppose.
I am sure that knowing the width and height ratio, percentages could be used to allow this scaling.
This is my updated file with some workings: Attachment 125257.
Had this been for a client, I would have ended up saving lots of time buying a commercial solution but I would have missed on on the learning experience.
Acorn