el Mago de CSS: recetas :

// set for all transitions + 2-D transforms - p.trans{ transition:all 800ms ease-in-out; }

transitions transition: property duration timing-function delay;
// use transition-property: comma, sep., list OR transition:all for multiples

margin

bkgnd.sz.

bord.rad.

opacity

box shadow

border

width

bkgnd.pos.

bkgnd.img.

padding

transforms : 2d transform: rotate(#deg) translate(#, #) scale(#, #) skew(#, #);
// note space sep. multiples & use single # if using X or Y axis only; neg. ok for each //

rotate

translate

scale

skew

mix:prev.3

transforms : 3d transform: name1(val) name2(val, val); // space sep. multiples
// ex's here - for parent: perspective: 200px; // for children: transform-style: preserve-3d;

rotateY

rotate3d

scaleZ/rotateX

translate3d

transf.origin

animations animation: name duration timing-function delay iteration-count direction fill-mode play-state;
// mult. are possible, using the long syntax and comma, sep., list
// animation-play-state: paused; > :running; on :hover + vendor prefixes not always shown

swing

hinged

grow it

drop it

bounce

rock it

springy

jump

multiple

steps

variations on a theme combinations of all the above...

cover
me

split

wander

spin

skewed

wave

travel

gather

Using with images example: drinking bird.