Search w3schools.com:

SHARE THIS PAGE

CSS Reference

CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser Support

CSS Properties

animation
appearance
backface-visibility
background
border
bottom
box
caption-side
clear
clip
color
column
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
grid-columns
grid-rows
hanging-punctuation
height
icon
left
letter-spacing
line-height
list-style
margin
max-height
max-width
min-height
min-width
nav
opacity
outline
overflow
overflow-x
overflow-y
padding
page-break
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
rotation-point
table-layout
target
text
top
transform
transition
vertical-align
visibility
width
white-space
word-spacing
word-break
word-wrap
z-index

CSS3 @keyframes Rule


Example

Make a div element move gradually 200px down:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The @keyframes rule is supported in Internet Explorer 10, Firefox, and Opera.

Safari and Chrome support an alternative, the @-webkit-keyframes rule.

Note: The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.

Definition and Usage

With the @keyframes rule, you can create animations.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Value Description
animationname Required. Defines the name of the animation.
keyframes-selector Required. Percentage of the animation duration.

Legal values:

0-100%
from (same as 0%)
to (same as 100%)

Note: You can have many keyframes-selectors in one animation.
css-styles Required. One or more legal CSS style properties

Examples

Try it Yourself - Examples


Example

Add many keyframe selectors in one animation:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

Try it yourself »

Example

Change many CSS styles in one animation:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

Try it yourself »

Example

Many keyframe selectors with many CSS styles:

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

Try it yourself »

Related Pages

CSS3 tutorial: CSS3 Animations


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]