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