CSS Animatable
Clash Royale CLAN TAG#URR8PPP googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
CSS Animatable
❮ Previous
Next ❯
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 numbers in the table specifies the first browser version that fully support CSS animations.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
Example
Animate the background-color from red to blue:
/* Code for old Chrome, Safari and Opera */
@-webkit-keyframes mymove
from background-color: red;
to background-color: blue;
/* Standard syntax */
@keyframes mymove
from background-color: red;
to background-color: blue;
Try it Yourself »
googletag.cmd.push(function() googletag.display('div-gpt-ad-1493883843099-0'); );
Animatable Properties
These properties are animatable in CSS:
| Property |
|---|
backgroundTry it |
background-colorTry it |
background-positionTry it |
background-sizeTry it |
borderTry it |
border-bottomTry it |
border-bottom-colorTry it |
border-bottom-left-radiusTry it |
border-bottom-right-radiusTry it |
border-bottom-widthTry it |
border-colorTry it |
border-leftTry it |
border-left-colorTry it |
border-left-widthTry it |
border-rightTry it |
border-right-colorTry it |
border-right-widthTry it |
border-spacingTry it |
border-topTry it |
border-top-colorTry it |
border-top-left-radiusTry it |
border-top-right-radiusTry it |
border-top-widthTry it |
bottomTry it |
box-shadowTry it |
clipTry it |
colorTry it |
column-countTry it |
column-gapTry it |
column-ruleTry it |
column-rule-colorTry it |
column-rule-widthTry it |
column-widthTry it |
columnsTry it |
filterTry it |
flexTry it |
flex-basisTry it |
flex-growTry it |
flex-shrinkTry it |
fontTry it |
font-sizeTry it |
| font-size-adjust |
| font-stretch |
font-weightTry it |
heightTry it |
leftTry it |
letter-spacingTry it |
line-heightTry it |
marginTry it |
margin-bottomTry it |
margin-leftTry it |
margin-rightTry it |
margin-topTry it |
max-heightTry it |
max-widthTry it |
min-heightTry it |
min-widthTry it |
object-positionTry it |
opacityTry it |
orderTry it |
outlineTry it |
outline-colorTry it |
outline-offsetTry it |
outline-widthTry it |
paddingTry it |
padding-bottomTry it |
padding-leftTry it |
padding-rightTry it |
padding-topTry it |
perspectiveTry it |
perspective-originTry it |
rightTry it |
text-decoration-colorTry it |
text-indentTry it |
text-shadowTry it |
topTry it |
transformTry it |
transform-originTry it |
vertical-alignTry it |
| visibility |
widthTry it |
word-spacingTry it |
z-indexTry it |
❮ Previous
Next ❯