CSS `Animation`

Definition and Usage

Some CSS properties are animatable, meaning they can be used for animations and transitions.

Animatable properties can gradually change from one value to another, such as size, number, percentage, and color.

Browser Support

The numbers in the table specify the first browser version that supports the method.

The prefixes -webkit-, -moz-, or -o- following the numbers indicate the first browser version that supported the property with a prefix.


4.0 -webkit-	10.0	16.0 <br>5.0 -moz-	4.0 -webkit-	15.0 -webkit- <br>12.1 <br>12.0 -o-

Example

The background color gradually changes from red to blue:

@keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

/* Safari and Chrome: */
@-webkit-keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

Animation Properties

Animation properties in CSS:

Property	Example
background	Try it 》
background-color	Try it 》
background-position	Try it 》
background-size	Try it 》
border	Try it 》
border-bottom	Try it 》
border-bottom-color	Try it 》
border-bottom-left-radius	Try it 》
border-bottom-right-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
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 》
height	Try it 》
left	Try it 》
letter-spacing	Try it 》
line-height	Try it 》
margin	Try it 》
margin-bottom	Try it 》
margin-left	Try it 》
margin-right	Try it 》
margin-top	Try it 》
max-height	Try it 》
max-width	Try it 》
min-height	Try it 》
min-width	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-bottom	Try it 》
padding-left	Try it 》
padding-right	Try it 》
padding-top	Try it 》
perspective	Try it 》
perspective-origin	Try it 》
right	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 》
vertical-align	Try it 》
visibility
width	Try it 》
word-spacing	Try it 》
z-index	Try it 》

❮ Func Calc Pr Grid Template Rows ❯

CSS Animation

Definition and Usage

Browser Support

Example

Animation Properties

CSS `Animation`