CSS Transitions allow us to transition a whole element (or just a particular CSS property of an element)
from one state to another.
Transition definition includes:
property: all, none, opacity, height, color, padding, etc.
duration: time in seconds (1s, 4s, 7s)
timing function/curve: indicates the flow of the transition
delay: time in seconds (0s, 5s, 10s, etc.)
Until the specification in finalized, using vendor prefixes is still a good idea:
-webkit-transition: property_name duration timing_function delay;
-moz-transition: property_name duration timing_function delay;
-o-transition: property_name duration timing_function delay;
transition: property_name duration timing_function delay;
These properties can also be specified individually, but then you should still add the vendor prefixes:
transition-property: property_name; transition-duration: duration; transition-timing-function: timing_function; transition-delay: delay;
Values for transition-property can include:
all none color opacity
padding border margin background-color
line-height font-size font-weight letter-spacing
z-index width height left top
The transition-timing-function property refers to the arc of the timing from the beginning state to the end state.
It allows for the effect to change speed over the duration of the transition.
This is based on cubic
It can be a known timing function or it can be a custom defined arc.
The arc consists of 4 points with X & Y coordinates.
Point 1 is always (0,0) and Point 4 is always (1,1)
Points 2 & 3 are defined by the timing function.
These numbers can even be negative!
Values for transition-timing-function can include:
linear - equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease - equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in - equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out - equivalent to cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out - equivalent to cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier - custom definition in the format:
cubic-bezier(pt2-x, pt2-y, pt3-x, pt3-y)
You can combine multiple transitions together by comma separating either the complete transition the individual properties.
Rotation is a transformation which
allows you to rotate an element.
Rotation can be specified in 4 different units
transform: rotate(90deg); /* Degrees - 360 degrees in a circle */
transform: rotate(100grad); /* Gradians - 400 gradians in a circle */
transform: rotate(1.57rad); /* 2π Radians in a full circle, equal to
transform: rotate(.25turn); /* Turns - a complete rotation = 1 turn */
- Rotations by default start from the center of an element. This can be changed with the
- The original space used by the object will be retained, but the rotation may cover up other objects.
- If overflow is set to
auto, then scroll bars may appear when an object is rotated.
rotate(0)will not work - the unit must always be specified
Rotate is just one of the CSS 3 Transforms which also includes:
scale - size any HTML element larger or smaller
scaleX - size any HTML element larger only on the horizontal, or flip it (with negative values)
scaleY - size any HTML element larger only on the vertical, or flip it (with negative values)
translate, translateX, translateY - move an HTML element along the X or Y axis (or both)
skewX, skewY - tilt an element along X or Y axis (like a parallelogram)
If multiple transformations are to be performed
(for instance, scale and rotate),
they can be combined into a single transform statement with a space between them.
transform: rotate(-5deg) scale(1.5);
is pretty good!
Animations allow you to specify a timeline of when certain CSS properties should take place.
Animations can use transformations or
other CSS properties.
Support is great - vendor prefixes still suggested.
Hands-On is the best way to see and play with this:
CSS3: Animations, Transitions, & Rotations
By Amanda Giles