CSS Animations

With CSS3 came new ways to add styling to HTML elements, these ways will not just affect the shape of the element but will also add animation both in 2D and 3D transform, the most common styles are shown in the table below:

Property	description
Rotate	rotates an object around its center
Scale	enlarge or contract image
Translate	reposition element relative to its location
Skew	distort an element
Transition	sets time for changing one style to another

The origin at which styling takes place can be changed from 50% 50% which represents the center of the elemnt and is the default value to any required value.

• Some prefixes are used in case the browser does not support transform properties like -webkit-, -moz-, and -o-.

The image below displays some of these properties