At the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.
That alone should help you see how these types of simple animations work. But let’s take this a bit further.
CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.
A few months ago, after helping to co-author HTML5 & CSS3 for the Real World, SitePoint asked me to do a related video screencast series on their new Learnable.com website.
The other day someone on another post 
Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life.
After messing around with CSS3 keyframe animations for a few months now, I realized (as is the case with most CSS3 stuff) repeating the code can be annoying.
I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 
Being a big baseball fan, I find myself perusing 
The 
If you’ve seen the code for 
In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.
