The W3C sites have some pretty good dynamic tutorials that let you play with code, directly see its effect, then copy it and paste it into your docs, I highly recommend playing with them.
By assigning a semi-global property of "transition all," if we just set a property: color, height, width, etc.; and then alter it in the :hover state of that object, any browser that understands transitions will do its best to render a smooth change between those things.
I have all of the code in this file written out like this:
tag {
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
but you can leave out everything but the -webkit part if you know you'll only be looking at it in Chrome or Safari, or just keep the -moz part if you know you'll just be using Firefox. Like this:
tag {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
See Spot grow
See Jane suddenly change color
See by the wind
This is a little more complicated, each kind of transformation has it's own commands, but you can combine multiples and group several transformations onto one item. Each transformations options can be found on the W3C pages. Detailed instructions and help await you there.
The Great part about these new techniques is that they can be combined — using transitions on the elements, and then putting the transformations on the hover states in the style sheet, allows you to animate the scaling, skewing, etc.
See Jane suddenly lose control (and change color)
See Jack get blown over by the wind