<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>
