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
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
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