Triggering CSS3 Transitions With JavaScript

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.