The site should be fun and accessible, but also a useful resource that encourages browsing around the topic of CSS Animation. It should answer questions readers might have on how to do certain things, but it should also inspire ideas by showing examples of how CSS Animation can be used.

Some ways it could convey this knowledge include a reference, breaking down each of the CSS properties involved and talking about how they might be used, and what they do, and listing examples.

A second way it could convey this knowledge could be the ideas of blogging and sharing shareable tips on Twitter and email. These could be based around examples than then link back to the reference for further reading. If structured this way, the example blog posts and tweets would not need to be very in-depth but just cover enough of the technology to inform and inspire. The readers that are interested could then dig in to more detail by browsing the reference with it's examples.

A third way this might work would be to make playgrounds. Interactive pieces that focus on demonstrating specific aspects of the animation properties. These might be specific enough to cover just one property, such as the delay or duration. Or else might cover multiple properties to show how they combine.

If taking on the third approach, some thought should be given to an underlying theme.

Site structure

Based on the assumptions so far, one structure might be:

Homepage
- Blog
-- Blog categories: Examples / Thoughts
- Reference home page
--propertyx
-- ...
- Playgrounds
-- playgroundx
-- ..
- About CSS Animation
- Sign up to mailing list
- 404

Themes

With the rock motif, more could be made of this as a character seen throughout the site. Also, using rocks should be something that permeates into the examples where relevant. It doesn't have to be everywhere but the goal would be to remind the user that the "rocks" site is the site they're on.

In this way, examples such as a bouncing ball could well be used for an animation, but they could be countered by showing an animation of a rock, not bouncing so much. The rock would then be a practical example of how an objects physical attributes can be conveyed with the animation style, and so serve more purpose than merely decorating.

Visual style

The site should be light and fast loading. Images should be used sparingly but at the same time the site should look fun. Emphasis will always be on the content in preference to decoration, but the site should take opportunities to move, animate or otherwise add visual flair that is in keeping with the "rocks" style.

Some ideas... maybe a bare screen with a rock in the bottom right corner, and a cactus or other rocks lightly scattered around. Moving the mouse could change their position to imply depth. If subtle enough, it could be interesting but not distract from the content.

A ragged rocky horizon for the footer of the site, separating it from the rest of the content and an opportunity to promote the author and signing up for the mailing list.

Email style: tone and visuals

An email template with a similar theme is essential. Doesn't need to be very fancy, a single column, logo at top, footer separation similar to page and a call to action in the footer such as following on Twitter or sharing the email with friends. Use it regularly.