CSS Property @keyframes

The @keyframes defines the keyframe in animations.

CSS Syntax

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

Property Values

animationname: Required. the animation name.
keyframes-selector: Required. Percentage of the animation duration. Legal values:0-100%|from (same as 0%)|to (same as 100%)
css-styles: Required. One or more CSS style properties

Browser compatibility


`@keyframes`	Yes	10.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from w w  w.j a v a 2s.  c o  m-->
    width: 100px;
    height: 100px;
    background: black;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite;
}

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

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}
</style>
</head>
<body>

    <div></div>

</body>
</html>

Click to view the demo

Example 2

The following code changes more than one properties.

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from  w ww .j av  a 2s.c  o m-->
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {top: 0px; background: black; width: 100px;}
    100% {top: 200px; background: white; width: 300px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px; background: black; width: 100px;}
    100% {top: 200px; background: white; width: 300px;}
}
</style>
</head>
<body>
    <div></div>

</body>
</html>

Click to view the demo