I first started out with rounded corners, a serious blessing for everyone who ever made a webpage. Than I added some box-shadow and a semi-transparent background to blend the boxes into the background.
That’s where I ran into the first limitations while trying to support IE. A rounded corners work-around is possible with CSS3 PIE but sadly it couldn’t cope with semi-transparent backgrounds. I finally chose to exclude CSS3 PIE and blend in the boxes in IE via
Than it was time to play with transitions. This I used to let the copyright-box show up after 2 seconds and let the wallpaper-chooser slide out of the copyright-box when hovered. The first effect is triggered by jQuery which I use to add an extra class to the body-tag once everything is loaded. This triggers a transition who changes the opacity from 0% to 100% over 4 seconds after a 2 second delay:
-webkit-transition: opacity 4s ease 2s;
After being bored by transitions I turned my attention to animations. Still a draft-spec of CSS3 but already supported in modern Webkit-based browsers (including Chrome, Safari and my Nexus One running Android 2.3!). I use the animations to highlight the menu with relevant links about me.
While playing with animations I wanted to start an animation the moment I hovered the object. After some testing I found out that it is possible to trigger an animation after it has already played and finished by setting the animation delay to a new value: