HTML and CSS Reference
In-Depth Information
can define multiple transitions on a single declaration by separating them using commas, like
this:
.example {
transition: color .4s ease-out, width .7s linear;
}
In this example, both the color and width properties will be transitioned, and they will do so
using different durations and timing functions.
Vendor Prefixes
If we include the code for transitions that we've just discussed, depending on the browser
being using to test them, it's possible that the code won't work. Some browsers currently sup-
port CSS transitions using the standard syntax (which I just introduced), but other browsers
require the use of an experimental prefix. To get this code working in all browsers that have
support for transitions, we need to write it like this:
nav a {
color: #fefefe;
-webkit-transition: color .4s ease-out;
-moz-transition: color .4s ease-out;
-o-transition: color .4s ease-out;
transition: color .4s ease-out;
}
Notice that, now, we are including four different lines of code for this single transition declar-
ation. The
-webkit-
line is for Chrome and Safari browsers, the
-moz-
line is for Firefox,
the
-o-
line is for Opera, and the last line (which has no vendor prefix, and which should
always be included last), is for all browsers that support the standard syntax, including IE10.
Vendor prefixes are generally safe to use, but be aware that when new CSS features are still
going through the standards process, there could be changes in the way the syntax works.
We don't have space in this topic to describe all the quirks that could potentially occur when
using vendor prefixes, so to learn more about which browsers support which features, and
