CSS Transforms, Transitions, and Animations

CSS has a large toolbox of capabilities with which someone can do an impressive amount of creative work, either with simple trills, or whole animated scenes. It largely has to do with psuedo-class states, keyframes, and the manipulation of properties at keyframes (which are shown as a percentage of the duration). There are different browser rendering properties to be aware of and should be accounted for.

The many properties availabe to manipulate is lengthy. Scale, offset, 3d options, rotate, and properties controlling time duration of transitions, durations, and delays can all work in tandem to create visually interesting animations. To me, the article 8 simple CSS3 transition was the most eye opening. With a minimal amount of input the CSS does an excellent job of rendering out simple, modern looking animations. They aren’t loud, they each take .3 seconds, and yet they look slick, they make it feel like the page is more real, more reactive, and all without the use of Javascript.

As for the 404 and “pure bounce animation” pages, they both look cool. However especially for the the pure bounce, having to manually input all those keyframes, while it is very compact for its output, it would take a while to lay it out, and in my opinion you hit a point of diminishing return quickly. I’m guessing that there isn’t so robust a debugging environment/checker going on in the background, so an error might put you back immensely, and with little recourse, besides basically check-listing all keyframes, spelling, and property values.