CSS动画控制器

浏览数：26 / 时间：2015年06月09日

<html>
<head>
    <title>animation</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #00b3ee;
        }
        /*动画过程控制器*/
        @-webkit-keyframes firstDiv{
            10%{
                background-color: #a94442;
                width: 200px;
                height: 200px;
            }
            30%{
                background-color: #398439;
                width: 200px;
                height: 200px;
            }
            50%{
                background-color: #afd9ee;
                width: 300px;
                height: 300px;
            }
            80%{
                background-color: #ffff00;
                width: 370px;
                height: 370px;
                transform:rotate(30deg);
            }
            100%{
                background-color: #ffff00;
                width: 500px;
                height: 500px;
                transform:rotate(60deg);
            }
        }
        div:hover{
            -webkit-animation-name: firstDiv;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:infinite;
        }
    </style>
</head>
<body>
<div>动画div</div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS动画控制器