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>

相关推荐