HTML and CSS Reference
In-Depth Information
This section details the properties that are supported in some major browsers shipping
circa late 2009. Each entry will present the following items:
• Brief summary
• Syntax summary
• Example(s) of use
• Compatibility information
• Notes and special considerations
The aim here is for completeness, but given the moving nature of emerging and
proprietary CSS features, readers are warned that this content may change or never be
widely adopted. Awareness of intent and presentation of basic syntax is the primary goal
here, as testing likely will be required to safely use these properties.
N
OTE
To provide for the best long-term accuracy, where possible and when clear, CSS3 syntax is
presented first. If a browser supports a property extension to emulate the CSS3 syntax, that will
be presented in the notes and examples. Not every possible browser extension is presented,
particularly those properties only implemented in a minor-market-share browser that have not
been defined at least partially in any known CSS3 module.
@keyframes
This CSS “at” rule is used to define the properties that will be animated in an animation rule.
Syntax
@keyframes:
keyframe-name
{percentage | from | to {cssrules}}*
where each block starts with the percentage into the animation at which the rules apply,
from
is a keyword for 0%, and
to
is a keyword for 100%.
Example
@-webkit-keyframes move {
from {
left: 0;
top: 0;
opacity: 1;
}
50% {
left: 500px;
top: 0;
opacity: 1;
}
to {
left: 500px;
top: 500px;
opacity: 1;
}}
