Creating CSS3 Transitions and Animations in CSS and triggering them with JavaScript


Transitions apply the effect of a change(hover,active,etc.) to an element over a given timeframe that you define. Though you would not normally do this for transitions you can alternatively click on the boxes to simulate a hover effect(for mobile devices).

Hover over me. I dare you!
I bet you cant hover over me!
Nah you know you want to hover over me.


Animations allow you to manipulate any CSS rule within a timeframe that you set.

Hey, Hey! Watch this!
Nope I'm better!
Psh you guys got nothing on me!