CSS3-KeyFrames-2

Use the percentage method to make the block complete the corresponding animation within the specified time

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (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>Note:</strong> @keyframes rules do not Compatible with IE 9 and earlier browsers.</p>

<div></div>

</body>
</html>

Guess you like