HTML5 and CSS3 Advent 2011

Framed by keyframes

You've seen them on and off in a lot of our previous entries, but today we're going to dedicate a full entry to them: @keyframes. In combination with transform you can animate your heart out and it is n our opinion the feature that will be the last straw for Flash.

Warning! these examples may overwhelm your browser as they use quite some resources.

A simple clock
Only javascript is used to set initial time
Snowy weather

How does it work?

The clock

The clock's pointers are set up to be rotated around the center of the clock by setting their transform-origin to their bottom center. In the animation we rotate each of them from transform: rotate(0deg) to transform: rotate(360deg), the trick is to just give each of them a different animation-duration (60 seconds for seconds, 60 minutes for minutes and 12 hours for hours). To have the "tick" effect for the seconds pointer we use animation-timing-function: steps(60,end) which makes the animation run in 60 steps instead of running smoothly.

As we cannot set the current time by CSS, we need to do this by javascript. The problem is that you can't have a varying starting rotations within the animation, we have wrapped each of the pointers and set the initial rotation for the current time on these. Another solution to this problem would have been setting a negative animation-delay to let the animation appear to begin somewhere in the middle of the cycle.

The weather

In the weather example we have defined multiple @keyframes animations for the clouds, the snowflake opacity and position, and the snowflake's rotation. The snowflake as well as the cloud are unicode characters (also see our entry on Icons with character) set within the HTML source. We copy both element multiple times with javascript and randomize — among others — their size, animation-duration, animation-delay and initial position.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012