HTML and CSS Reference
In-Depth Information
Compatibility
CSS3
Safari 4+
Notes
• WebKit supports this property as
-webkit-transform-style
, though it is currently
only available in the iPhone and the development builds of Safari 4+.
• Sometimes it is not possible to preserve 3-D, such as when an element has its
overflow
property set to
hidden
.
transition
This shorthand property is used to describe all transition-related properties at once.
Syntax
transition: transition-property transition-duration
transition-timing-function transition-delay
where the individual transition properties are defined in their own entries. Multiple
transitions can be listed separated by commas.
Example
<div id="d1" style="
-webkit-transition: background-color 3s ease-out,
opacity 5s linear 3s;
transition: background-color 3s ease-out, opacity 5s linear 3s;
background-color:red;
height: 100px;
width: 100px;
text-align: center;">
Click me
</div>
O
NLINE
http://htmlref.com/ch6/transition.html
Compatibility
CSS3 Proposed
Chrome 2+, Firefox 3.7+, Safari 3.1+
Notes
• WebKit supports this property as
-webkit-transition
. Firefox browsers would
use a
-moz
prefix.
• The similarity with animation properties suggests that CSS transitions may include
similar syntax for keyframes or that one syntax will be eliminated.
transition-delay
This property is used to define a delay before an animation starts.
