CSS3-KeyFrames-2
使用百分比的方式让方块在规定时间内完成对应动画
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove5sinfinite;
-webkit-animation:mymove133sinfinite;/*SafariandChrome*/
}
@keyframesmymove
{
0%{
background-color:#ffc602
}
20%{
background-color:#1363bc;
-webkit-transform:translateY(-10px);
height:210px;
}
40%{
background-color:#cf0fff;
-webkit-transform:translateY(-20px);
height:220px
}
60%{
background-color:#810977;
-webkit-transform:translateY(-30px);
height:230px
}
80%{
background-color:#c91f10;
-webkit-transform:translateY(-40px);
height:240px
}
100%{
background-color:#ffc602;
-webkit-transform:translateY(-50px);
height:250px
}
}
@-webkit-keyframesmymove/*SafariandChrome*/
{
0%{
background-color:#ffc602
}
20%{
background-color:#1363bc;
-webkit-transform:translateY(-10px);
height:210px;
}
40%{
background-color:#cf0fff;
-webkit-transform:translateY(-20px);
height:220px
}
60%{
background-color:#810977;
-webkit-transform:translateY(-30px);
height:230px
}
80%{
background-color:#c91f10;
-webkit-transform:translateY(-40px);
height:240px
}
100%{
background-color:#ffc602;
-webkit-transform:translateY(-50px);
height:250px
}
}
</style>
</head>
<body>
<p><strong>注意:</strong>@keyframes规则不兼容IE9以及更早版本的浏览器.</p>
<div></div>
</body>
</html>