Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Animatable?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
@___ mymove {3Order
Put the learning moves in the order that makes the concept easiest to apply.
Some CSS properties are animatable , meaning that they can be used in animations and transitions.
Animatable Properties
Definition and Usage
Definition and Usage
Some CSS properties are animatable , meaning that they can be used in animations and transitions.
Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.
Browser Support
The animation properties are supported in all modern browsers.
The numbers in the table specifies the first browser version that fully support CSS animations.
| 43 | 10 | 16 | 9 | 30 |
|---|
Example
Formatted code
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}Live preview
Animatable Properties
These properties are animatable in CSS
| Property |
|---|
| aspect-ratio Try it |
| background Try it |
| background-color Try it |
| background-position Try it |
| background-position-x Try it |
| background-position-y Try it |
| background-size Try it |
| block-size Try it |
| border Try it |
| border-bottom Try it |
| border-bottom-color Try it |
| border-end-end-radius Try it |
| border-end-start-radius Try it |
| border-block Try it |
| border-block-color Try it |
| border-block-end-color Try it |
| border-block-end-width Try it |
| border-block-start-color Try it |
| border-block-start-width Try it |
| border-block-width Try it |
| border-bottom-left-radius Try it |
| border-bottom-right-radius Try it |
| border-inline Try it |
| border-inline-color Try it |
| border-inline-end-color Try it |
| border-inline-end-width Try it |
| border-inline-start-color Try it |
| border-inline-start-width Try it |
| border-inline-width Try it |
| border-start-end-radius Try it |
| border-start-start-radius Try it |
| border-bottom-width Try it |
| border-color Try it |
| border-left Try it |
| border-left-color Try it |
| border-left-width Try it |
| border-right Try it |
| border-right-color Try it |
| border-right-width Try it |
| border-spacing Try it |
| border-top Try it |
| border-top-color Try it |
| border-top-left-radius Try it |
| border-top-right-radius Try it |
| border-top-width Try it |
| bottom Try it |
| box-shadow Try it |
| clip Try it |
| color Try it |
| column-count Try it |
| column-gap Try it |
| column-rule Try it |
| column-rule-color Try it |
| column-rule-width Try it |
| column-width Try it |
| columns Try it |
| filter Try it |
| flex Try it |
| flex-basis Try it |
| flex-grow Try it |
| flex-shrink Try it |
| font Try it |
| font-size Try it |
| font-size-adjust |
| font-stretch |
| font-weight Try it |
| grid Try it |
| grid-area Try it |
| grid-auto-columns Try it |
| grid-auto-flow Try it |
| grid-auto-rows Try it |
| grid-column Try it |
| grid-column-end Try it |
| grid-column-gap Try it |
| grid-column-start Try it |
| grid-gap Try it |
| grid-row Try it |
| grid-row-end Try it |
| grid-row-gap Try it |
| grid-row-start Try it |
| grid-template Try it |
| grid-template-areas Try it |
| grid-template-columns Try it |
| grid-template-rows Try it |
| height Try it |
| inline-size Try it |
| inset Try it |
| inset-block Try it |
| inset-block-end Try it |
| inset-block-start Try it |
| inset-inline Try it |
| inset-inline-end Try it |
| inset-inline-start Try it |
| left Try it |
| letter-spacing Try it |
| line-height Try it |
| margin Try it |
| margin-block Try it |
| margin-block-end Try it |
| margin-block-start Try it |
| margin-bottom Try it |
| margin-inline Try it |
| margin-inline-end Try it |
| margin-inline-start Try it |
| margin-left Try it |
| margin-right Try it |
| margin-top Try it |
| max-height Try it |
| max-width Try it |
| max-block-size Try it |
| max-inline-size Try it |
| min-block-size Try it |
| min-inline-size Try it |
| min-height Try it |
| min-width Try it |
| object-position Try it |
| offset-anchor Try it |
| offset-distance Try it |
| offset-path Try it |
| offset-rotate Try it |
| opacity Try it |
| order Try it |
| outline Try it |
| outline-color Try it |
| outline-offset Try it |
| outline-width Try it |
| padding Try it |
| padding-block Try it |
| padding-block-end Try it |
| padding-block-start Try it |
| padding-bottom Try it |
| padding-inline Try it |
| padding-inline-end Try it |
| padding-inline-start Try it |
| padding-left Try it |
| padding-right Try it |
| padding-top Try it |
| perspective Try it |
| perspective-origin Try it |
| right Try it |
| rotate Try it |
| scale Try it |
| text-decoration-color Try it |
| text-indent Try it |
| text-shadow Try it |
| top Try it |
| transform Try it |
| transform-origin Try it |
| translate Try it |
| vertical-align Try it |
| visibility |
| width Try it |
| word-spacing Try it |
| z-index Try it |