CSS3 Notes

CSS3 Animation

animation: flip 1s linear 2s 1 normal ;

Properties

name – Name of the animation used when creating the keyframes
duration – How long the animation lasts
timing-function – Determines the actual speed of the animation (i.e. linear / ease / ease-in / ease-out )
delay – how long before the animation is actually performed.
iteration-count – how many times the animation will happen.
direction – Wether the animation performs keyframes 0 to 100 or 100 to 0.
fill-mode – defines what style will be applied before or after the animation is done.

Transform

translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document.  Positive values will push an element down and to the right of its default position while negative values will pull an element up and to the left of its default position.