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. See Animation
background-color As a color See Animation
background-position As repeatable list of simple list of length, percentage, or calc. See Animation
background-size As repeatable list of simple list of length, percentage, or calc. See 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. See Animation
border-color As a color of the specific border color properties. See Animation
border-width As a color of the specific border width properties. See Animation
border-bottom As a color and width of the specific border properties. See Animation
border-bottom-color As a color. See Animation
border-bottom-left-radius As a length, percentage or calc. See Animation
border-bottom-right-radius As a length, percentage or calc. See Animation
border-bottom-width As a length. See Animation
border-left As a color and width of the specific border properties. See Animation
border-left-color As a color. See Animation
border-left-width As a length. See Animation
border-radius See individual properties. See Animation
border-right As a color and width of the specific border properties. See Animation
border-right-color As a color. See Animation
border-right-width As a length. See Animation
border-spacing As a simple list of length. See Animation
border-top As a color and width of the specific border properties. See Animation
border-top-color As a color. See Animation
border-top-left-radius As a length, percentage or calc. See Animation
border-top-right-radius As a length, percentage or calc. See Animation
border-top-width As a length. See Animation
bottom As a length, percentage, or calc. See Animation
box-shadow As a shadow list. See Animation
caret-color As a color. See Animation
clip As a rectangle. See Animation
color As a color. See Animation
column-count As an integer. See Animation
column-gap By computed value type. See Animation
column-rule As each of the properties of the shorthand. See individual properties. See Animation
column-rule-color As a color. See Animation
column-rule-width As a length. See Animation
column-width As a length. See Animation
columns As each of the properties of the shorthand. See the individual properties. See Animation
content Discrete. See Animation
filter See Animation
flex As each of the properties of the shorthand. See the individual properties. See Animation
flex-basis As a length, percentage or calc. See Animation
flex-grow As a number. See Animation
flex-shrink As a number. See Animation
flood-color By computed value. See Animation
flood-opacity By computed value. See Animation
font As each of the properties of the shorthand. See the individual properties. See Animation
font-size As a length. See Animation
font-size-adjust As a number. See Animation
font-stretch As a font stretch. See Animation
font-weight As a font weight. See Animation
gap By computed value type. See Animation
grid-area Discrete. See Animation
grid-auto-columns Discrete. See Animation
grid-auto-flow Discrete. See Animation
grid-auto-rows Discrete. See Animation
grid-column-end Discrete. See Animation
grid-column-gap By computed value type. This property is now an alias for column-gap. See Animation
grid-column-start Discrete. See Animation
grid-column Discrete. See Animation
grid-gap By computed value type. This property is now an alias for gap. See Animation
grid-row-end Discrete. See Animation
grid-row-gap By computed value type. This property is now an alias for row-gap. See Animation
grid-row-start Discrete. See Animation
grid-row Discrete. See Animation
grid-template-areas Discrete. See Animation
grid-template-columns Discrete. See Animation
grid-template-rows Discrete. See Animation
grid-template Discrete. See Animation
grid Discrete. See Animation
height As a length, percentage or calc. See Animation
image-rendering Discrete. See Animation
left As a length, percentage, or calc. See Animation
letter-spacing As a length. See Animation
lighting-color By computed value. See Animation
line-height As a number or a length. See Animation
margin As a length. See Animation
margin-bottom As a length. See Animation
margin-left As a length. See Animation
margin-right As a length. See Animation
margin-top As a length. See Animation
max-height As a length, percentage or calc. See Animation
max-width As a length, percentage or calc. See Animation
min-height As a length, percentage or calc. See Animation
min-width As a length, percentage or calc. See Animation
object-fit Discrete. See Animation
object-position As for background-position. See Animation
opacity As a number. See Animation
order As an integer. See Animation
outline As each of the properties of the shorthand. See the individual properties. See Animation
outline-color As a color. See Animation
outline-offset As a length. See Animation
outline-width As a length. See Animation
padding As a length. See Animation
padding-bottom As a length. See Animation
padding-left As a length. See Animation
padding-right As a length. See Animation
padding-top As a length. See Animation
perspective As a length. See Animation
perspective-origin As a simple list of a length, percentage or calc. See Animation
quotes Discrete. See Animation
right As a length, percentage, or calc. See Animation
row-gap By computed value type. See Animation
tab-size As a length. See Animation
text-align Discrete. See Animation
text-align-all Discrete.  
text-align-last Discrete. See Animation
text-decoration As a color (i.e. the text-decoration-color property of the shorthand). See Animation
text-decoration-color As a color. See Animation
text-justify Discrete. See Animation
text-indent As a length, percentage or calc. See Animation
text-shadow As a shadow list. See Animation
top As a length, percentage, or calc. See Animation
transform As a transform. See Animation
vertical-align As a length. See Animation
visibility As a visibility. See Animation
width As a length, percentage or calc. See Animation
word-spacing As a length. See Animation
z-index As an integer. See Animation

Related