CSS Animatable Properties
The following list contains all the animatable properties from CSS. These are the properties that can be used with CSS animations.
| Property | Animatable | View |
|---|---|---|
background |
As each of the background-color, background-position, and background-size properties (only these three are animatable). See below for more info on these properties. |
Animation |
background-color |
As a color | Animation |
background-position |
As repeatable list of simple list of length, percentage, or calc. | Animation |
background-size |
As repeatable list of simple list of length, percentage, or calc. | Animation |
border |
As each of the properties for border width and border color. Border style is not animatable. See below for more information on these individual properties. | Animation |
border-color |
As a color of the specific border color properties. | Animation |
border-width |
As a color of the specific border width properties. | Animation |
border-bottom |
As a color and width of the specific border properties. | Animation |
border-bottom-color |
As a color. | Animation |
border-bottom-left-radius |
As a length, percentage or calc. | Animation |
border-bottom-right-radius |
As a length, percentage or calc. | Animation |
border-bottom-width |
As a length. | Animation |
border-left |
As a color and width of the specific border properties. | Animation |
border-left-color |
As a color. | Animation |
border-left-width |
As a length. | Animation |
border-radius |
See individual properties. | Animation |
border-right |
As a color and width of the specific border properties. | Animation |
border-right-color |
As a color. | Animation |
border-right-width |
As a length. | Animation |
border-spacing |
As a simple list of length. | Animation |
border-top |
As a color and width of the specific border properties. | Animation |
border-top-color |
As a color. | Animation |
border-top-left-radius |
As a length, percentage or calc. | Animation |
border-top-right-radius |
As a length, percentage or calc. | Animation |
border-top-width |
As a length. | Animation |
bottom |
As a length, percentage, or calc. | Animation |
box-shadow |
As a shadow list. | Animation |
caret-color |
As a color. | Animation |
clip |
As a rectangle. | Animation |
color |
As a color. | Animation |
column-count |
As an integer. | Animation |
column-gap |
As a length. | Animation |
column-rule |
As each of the properties of the shorthand. See individual properties. | Animation |
column-rule-color |
As a color. | Animation |
column-rule-width |
As a length. | Animation |
column-width |
As a length. | Animation |
columns |
As each of the properties of the shorthand. See the individual properties. | Animation |
content |
Discrete. | Animation |
filter |
Animation | |
flex |
As each of the properties of the shorthand. See the individual properties. | Animation |
flex-basis |
As a length, percentage or calc. | Animation |
flex-grow |
As a number. | Animation |
flex-shrink |
As a number. | Animation |
font |
As each of the properties of the shorthand. See the individual properties. | Animation |
font-size |
As a length. | Animation |
font-size-adjust |
As a number. | Animation |
font-stretch |
As a font stretch. | Animation |
font-weight |
As a font weight. | Animation |
grid-area |
Discrete. | Animation |
grid-auto-columns |
Discrete. | Animation |
grid-auto-flow |
Discrete. | Animation |
grid-auto-rows |
Discrete. | Animation |
grid-column-end |
Discrete. | Animation |
grid-column-gap |
Discrete. | Animation |
grid-column-start |
Discrete. | Animation |
grid-column |
Discrete. | Animation |
grid-gap |
Discrete. | Animation |
grid-row-end |
Discrete. | Animation |
grid-row-gap |
Discrete. | Animation |
grid-row-start |
Discrete. | Animation |
grid-row |
Discrete. | Animation |
grid-template-areas |
Discrete. | Animation |
grid-template-columns |
Discrete. | Animation |
grid-template-rows |
Discrete. | Animation |
grid-template |
Discrete. | Animation |
grid |
Discrete. | Animation |
height |
As a length, percentage or calc. | Animation |
left |
As a length, percentage, or calc. | Animation |
letter-spacing |
As a length. | Animation |
line-height |
As a number or a length. | Animation |
margin |
As a length. | Animation |
margin-bottom |
As a length. | Animation |
margin-left |
As a length. | Animation |
margin-right |
As a length. | Animation |
margin-top |
As a length. | Animation |
max-height |
As a length, percentage or calc. | Animation |
max-width |
As a length, percentage or calc. | Animation |
min-height |
As a length, percentage or calc. | Animation |
min-width |
As a length, percentage or calc. | Animation |
opacity |
As a number. | Animation |
order |
As an integer. | Animation |
outline |
As each of the properties of the shorthand. See the individual properties. | Animation |
outline-color |
As a color. | Animation |
outline-offset |
As a length. | Animation |
outline-width |
As a length. | Animation |
padding |
As a length. | Animation |
padding-bottom |
As a length. | Animation |
padding-left |
As a length. | Animation |
padding-right |
As a length. | Animation |
padding-top |
As a length. | Animation |
perspective |
As a length. | Animation |
perspective-origin |
As a simple list of a length, percentage or calc. | Animation |
quotes |
Discrete. | Animation |
right |
As a length, percentage, or calc. | Animation |
tab-size |
As a length. | Animation |
text-decoration |
As a color (i.e. the text-decoration-color property of the shorthand). |
Animation |
text-decoration-color |
As a color. | Animation |
text-indent |
As a length, percentage or calc. | Animation |
text-shadow |
As a shadow list. | Animation |
top |
As a length, percentage, or calc. | Animation |
transform |
As a transform. | Animation |
vertical-align |
As a length. | Animation |
visibility |
As a visibility. | Animation |
width |
As a length, percentage or calc. | Animation |
word-spacing |
As a length. | Animation |
z-index |
As an integer. | Animation |