css @keyframes attribute syntax

What @keyframes that? Linear motor manufacturer

@keyframes is a rule of CSS can be used to define the behavior of a cycle of CSS animations, create simple animations.

Role: by @keyframes rules, you can create animation.

Description: create animations principle is that the set of CSS style gradually change to another set of style. During animation, you can change many times this CSS styles. A predetermined percentage change in time of occurrence, either by keyword "from" and "to", is equivalent to 0% and 100%. 0% is the end time of the start time of the animation, the animation of 100%. For optimal browser support, you should always define the 0% and 100% of the selector.

Note: Please use the animation property to control the appearance of the animation, while the animation and select bind.

Property Example css @keyframes

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

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

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

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

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

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>