1. Overview of CSS Animatable Properties

CSS animatable properties are vital in enhancing user experience and adding interactivity to web pages. We can develop more appealing web apps and web sites by incorporating these CSS animatable properties. This tutorial is a complete reference to all the animatable properties alphabetically with interactive examples and how to leverage them effectively to create stunning animations.

2. What are CSS Animatable Properties?

  • In CSS language, there are some properties which we can employ in transitions and animations.
  • Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.
  • It is important to note that all CSS properties are not animatable and only certain properties are available to animate HTML elements.
  • We can smoothly and efficiently apply the animations without utilizing JavaScript code.

3. Animatable Properties List

Property Example
aspect-ratio Try
background Try
background-color Try
background-position Try
background-position-x Try
background-position-y Try
background-size Try
block-size Try
border Try
border-bottom Try
border-bottom-color Try
border-end-end-radius Try
border-end-start-radius Try
border-block Try
border-block-color Try
border-block-end-color Try
border-block-end-width Try
border-block-start-color Try
border-block-start-width Try
border-block-width Try
border-bottom-left-radius Try
border-bottom-right-radius Try
border-inline Try
border-inline-color Try
border-inline-end-color Try
border-inline-end-width Try
border-inline-start-color Try
border-inline-start-width Try
border-inline-width Try
border-start-end-radius Try
border-start-start-radius Try
border-bottom-width Try
border-color Try
border-left Try
border-left-color Try
border-left-width Try
border-right Try
border-right-color Try
border-right-width Try
border-spacing Try
border-top Try
border-top-color Try
border-top-left-radius Try
border-top-right-radius Try
border-top-width Try
bottom Try
box-shadow Try
clip Try
color Try
column-count Try
column-gap Try
column-rule Try
column-rule-color Try
column-rule-width Try
column-width Try
columns Try
filter Try
flex Try
flex-basis Try
flex-grow Try
flex-shrink Try
font Try
font-size Try
font-weight Try
grid Try
grid-area Try
grid-auto-columns Try
grid-auto-flow Try
grid-auto-rows Try
grid-column Try
grid-column-gap Try
grid-column-start Try
grid-gap Try
grid-row Try
grid-row-end Try
grid-row-gap Try
grid-row-start Try
grid-template Try
grid-template-areas Try
grid-template-columns Try
grid-template-rows Try
height Try
inline-size Try
inset Try
inset-block Try
inset-block-end Try
inset-block-start Try
inset-inline Try
inset-inline-end Try
inset-inline-start Try
left Try
letter-spacing Try
line-height Try
margin Try
margin-block Try
margin-block-end Try
margin-block-start Try
margin-bottom Try
margin-inline Try
margin-inline-end Try
margin-inline-start Try
margin-left Try
margin-right Try
margin-top Try
max-height Try
max-width Try
max-block-size Try
max-inline-size Try
min-block-size Try
min-inline-size Try
min-height Try
min-width Try
object-position Try
offset-anchor Try
offset-distance Try
offset-path Try
offset-rotate Try
opacity Try
order Try
outline Try
outline-color Try
outline-offset Try
outline-width Try
padding Try
padding-block Try
padding-block-end Try
padding-block-start Try
padding-bottom Try
padding-inline Try
padding-inline-end Try
padding-inline-start Try
padding-left Try
padding-right Try
padding-top Try
perspective Try
perspective-origin Try
right Try
transform Try
transform-origin Try
translate Try
vertical-align Try
width Try
word-spacing Try
z-index Try

4. Reference Links

We collected resources from below websites to finalize this complete list of CSS animatable properties.

  • The resources on W3Schools was helpful to compile this updated reference list.
  • The animatable properties reference on MDN was also handy to finalize our list.
Give Us Your Feedback
If You Need Any Help!
Contact Us