CSS Animatable (Animations and Transitions)
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.
Example
Animate the background-color from red to blue:
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
from {background-color: red;}
to {background-color: blue;}
}
Animatable Properties
These properties are animatable in CSS:
Property |
---|
background |
background-color |
background-position |
background-size |
border |
border-bottom |
border-bottom-color |
border-bottom-left-radius |
border-bottom-right-radius |
border-bottom-width |
border-color |
border-left |
border-left-color |
border-left-width |
border-right |
border-right-color |
border-right-width |
border-spacing |
border-top |
border-top-color |
border-top-left-radius |
border-top-right-radius |
border-top-width |
bottom |
box-shadow |
clip |
color |
column-count |
column-gap |
column-rule |
column-rule-color |
column-rule-width |
column-width |
columns |
filter |
flex |
flex-basis |
flex-grow |
flex-shrink |
font |
font-size |
font-size-adjust |
font-stretch |
font-weight |
grid |
grid-area |
grid-auto-columns |
grid-auto-flow |
grid-auto-rows |
grid-column |
grid-column-end |
grid-column-gap |
grid-column-start |
grid-gap |
grid-row |
grid-row-end |
grid-row-gap |
grid-row-start |
grid-template |
grid-template-areas |
grid-template-columns |
grid-template-rows |
height |
left |
letter-spacing |
line-height |
margin |
margin-bottom |
margin-left |
margin-right |
margin-top |
max-height |
max-width |
min-height |
min-width |
object-position |
opacity |
order |
outline |
outline-color |
outline-offset |
outline-width |
padding |
padding-bottom |
padding-left |
padding-right |
padding-top |
perspective |
perspective-origin |
right |
text-decoration-color |
text-indent |
text-shadow |
top |
transform |
transform-origin |
vertical-align |
visibility |
width |
word-spacing |
z-index |
Comments
Post a Comment