Hi all,

I'm not sure if this is the right place to post this but here goes.

I have created a website, where there is a circular portal with a big button in the center of the screen, which is rotating with CSS3 animations, the sequence that comes next is the problem, where I need help.

The sequence goes as such:

Press Button.
Button Disappears.
Portal changes and gets smaller.
Background Colour changes (gets lighter)
User Interface outline draws out on screen.
Buttons and images show up.

Now a what I am stuck on is which development technologies should I use and how do I make the sequence happen one after the other, like a big animation piece.

I know I can use HTML5 Canvas to draw out the outlines of the UI, and CSS3 Animations to transition between background colours, but how to fit it together, maybe with JavaScript, also how to make it all happen with out refreshing the page, I'm a novice at AJAX.

I know it's asking a lot, but any help would be gratefully appreciated.

Thanks everyone in advance...