CSS3-KeyFrames-2

使用百分比的方式让方块在规定时间内完成对应动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 133s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
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-keyframes mymove /* Safari and Chrome */
{
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 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

猜你喜欢