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.
How does it work?
The clock's pointers are set up to be rotated around the center of the clock by setting
transform-origin to their bottom center. In the animation we rotate each of
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.
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.
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
animation-delay and initial position.
Show us the source!
Feel free to look around the different source files we used for this example.