HTML and CSS Reference
In-Depth Information
Compatibility
CSS3 Proposed
Chrome 2+, Firefox 3.7+, Safari 3.1+
Note
• WebKit supports this property as
-webkit-transition-duration
. Firefox
browsers would use a
-moz
prefix.
• Firefox support is based upon a pre-release version currently numbered as 3.7,
though this is subject to change.
transition-property
This property is used to define which properties a transition will be applied to.
Syntax
transition-property: all | none |
property-name-1
[,...property-name-N] -
where
property-name
is simply a CSS property name like
color
. The default value is
all
,
which indicates that any property change will be animated. Multiple properties can be
listed in a comma-separated list. If this is the case, other transition properties can also be
listed with a comma-separated list, and the values will match up in order.
Example
<div id="d1" style="-webkit-transition-property: background-color, opacity;
-webkit-transition-duration: 3s, 5s;
transition-property: background-color, opacity;
transition-duration: 3s, 5s;
background-color: red;
height: 100px;
width: 100px;
text-align: center;">
Click me
</div>
Compatibility
CSS3 Proposed
Chrome 2+, Firefox 3.7+, Safari 3.1+
Notes
• WebKit supports this property as
-webkit-transition-property
. Firefox
browsers would use a
-moz
prefix.
• The similarity with animation properties suggests that CSS transitions may include
similar syntax or that one syntax form may prevail.
• Firefox support is based upon a pre-release version currently numbered as 3.7,
though this is subject to change.
transition-timing-function
This property is used to describe how the animation will play.
