Shortlink

How to force CSS3 Animations in Webkit to play again

My personal webpage has turned into my CSS3-playground of lately. Inspired by this great HTML5-slideshow I just had to try all the new tricks that CSS3 has to offer.

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 filter:alpha(opacity=X)

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: -webkit-animation-delay: 0s;

When done via :hover the animation is fired but when the hover is removed the old delay is set again which will trigger the animation again after the original delay! Correct solution to force the animation to replay is to change the delay via javascript when the mouse is hovering the object. First change it to an irrelevant value and change it to 0s afterwards to trigger it immediately.

Shortlink

Kaboom!

Today I found some time to create my own place on the web. A place where I can store all the things I do that are actually useful to share with other people instead of all my usual beer-drinking and travel stories. Expect more content soon.