Property Description
The transition-property property specifies the names of CSS properties to which a transition effect should be applied.
This property has the following syntax:
transition-property: none|all|property-name|initial|inherit
Property Values
| Value | Description |
|---|---|
| none | Specifies that no properties will transition |
| all | (default) Specifies that all properties that can have an animated transition will do so |
| property-name | Specifies a property to which a transition effect should be applied when its value changes. |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Animated Properties
The following table lists the properties that can be animated:
| Property | Value Type |
|---|---|
background-color |
<color> |
background-image |
gradients only (not implemented as of 2010/04/11) |
background-position |
<percentage> | <length> |
background-size |
<percentage> | <length> |
border-color
(including sub-properties) |
<color> |
border-radius
(including sub-properties) |
<percentage> | <length> |
border-width
(including sub-properties) |
<length> |
border-spacing |
<length> |
bottom |
<percentage> | <length> |
-moz-box-flex |
number |
box-shadow |
shadow |
color |
<color> |
-moz-column-count |
number |
-moz-column-gap |
<length>, keywords |
-moz-column-rule-color |
<color> |
-moz-column-rule-width |
<length>, keywords |
-moz-column-width |
<length> |
clip |
rectangle |
fill |
paint |
fill-opacity |
opacity-value |
flood-color |
<color> | keywords |
font-size |
<percentage> | <length> |
font-size-adjust |
number, keywords |
font-stretch |
keywords |
font-weight |
number | keywords (excluding bolder, lighter) |
height |
<percentage> | <length> |
-moz-image-region |
rect() |
left |
<percentage> | <length> |
letter-spacing |
<length> |
lighting-color |
<color> | keywords |
line-height |
number | <percentage> | <length> |
margin
(including sub-properties) |
<length> |
marker-offset |
<length> |
max-height |
<percentage> | <length> |
max-width |
<percentage> | <length> |
min-height |
<percentage> | <length> |
min-width |
<percentage> | <length> |
opacity |
number |
outline-color |
<color> |
outline-offset |
integer |
-moz-outline-radius (including sub-properties) |
<percentage> | <length> |
outline-width |
<length> |
padding
(including sub-properties) |
<length> |
right |
<percentage> | <length> |
stop-color |
<color> | keywords |
stop-opacity |
opacity-value |
stroke |
paint |
stroke-dasharray |
dasharray |
stroke-dashoffset |
<percentage> | <length> |
stroke-miterlimit |
miterlimit |
stroke-opacity |
opacity-value |
stroke-width |
<percentage> | <length> |
text-indent |
<percentage> | <length> |
text-shadow |
shadow |
top |
<percentage> | <length> |
-moz-transform-origin |
<percentage> | <length>, keywords |
-moz-transform |
transform-function |
vertical-align |
<percentage> | <length>, keywords |
visibility |
visibility |
width |
<percentage> | <length> |
word-spacing |
<percentage> | <length> |
z-index |
integer |
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 26
4.0 -webkit- |
16
4.0 -moz- |
10.0 | 6.1
3.1 -webkit- |
12.1
10.5 -o- |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | CSS3 |
| Default Value: | all |
