CSS3 Animations - going into normal HTML

[wavering]

I have just started using CSS3 to create animations and it is working very nicely! The problem I have is how to just continue using ordinary HTML when the animations end

So, I have some stuff with stars and pyramids etc and the relevant code is here

<div id="landscape"></div>
<div id="sky"></div>
<div id="sun"></div>
<div id="stars"></div>
<div id="pyramid"></div>
<div id="screen"></div>

<p>
<script>
  alert("Here!")
</script>

stuff here <button type="button" onclick="alert('Hi!')">Click Me!</button>
</p>

The whole thing is here:
http://www.mopeks.org/eclipse24.htm

so you can look at the source code easily enough. The end is not yet sorted (and currently it only works in Firefox) but you will get the idea.

There are two problems

1. The alert comes up right at the start rather than the end where I want it
2. The button is frozen

Any clues? And a happy New Year!
.

[PeejAvery]

1. The alert comes at the end because it's JavaScript, while your animations are CSS3. Unless you trigger the animations with JavaScript, you will not be able to change the timing.

2. What button is "frozen"?