Definition and Usage
Some CSS properties are
animatable, meaning that they can be used in animations and transitions.
Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.
Browser Support
The numbers in the table specifies the first browser version that fully support CSS animations.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
|
|
|
|
|
43.0
4.0 -webkit- | 10.0 | 16.0
5.0 -moz- | 9.0
4.0 -webkit- | 30.0
15.0 -webkit-
12.0 -o- |
Example
Animate the background-color from red to blue:
/* Code for old Chrome, Safari and Opera */
@-webkit-keyframes mymove {
from {background-color: red;}
to {background-color: blue;}}
/* Standard syntax */
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}}
Animatable Properties
These properties are
animatable in CSS:
| background-color |
| background-position |
| background-size |
| border |
| border-bottom |
| border-bottom-color |
| border-bottom-left-radius |
| border-bottom-right-radius |
| border-bottom-width |
| border-color |
| border-left |
| border-left-color |
| border-left-width |
| border-right |
| border-right-color |
| border-right-width |
| border-spacing |
| border-top |
| border-top-color |
| border-top-left-radius |
| border-top-right-radius |
| border-top-width |
| bottom |
| box-shadow |
| clip |
| color |
| column-count |
| column-gap |
| column-rule |
| column-rule-color |
| column-rule-width |
| column-width |
| columns |
| filter |
| flex-grow |
| flex-shrink |
| font |
| font-size |
| font-size-adjust |
| font-stretch |
| font-weight |
| height |
| left |
| letter-spacing |
| line-height |
| margin |
| margin-bottom |
| margin-left |
| margin-right |
| margin-top |
| max-height |
| max-width |
| min-height |
| min-width |
| opacity |
| order |
| outline |
| outline-color |
| outline-offset |
| outline-width |
| padding |
| padding-bottom |
| padding-left |
| padding-right |
| padding-top |
| perspective |
| perspective-origin |
| right |
| text-decoration-color |
| text-indent |
| text-shadow |
| top |
| transform |
| transform-origin |
| vertical-align |
