文章来源：宗波尘客www.zbck123.com
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 50px;
background-color: red;
animation-name: suibianqumingzi;
position: absolute;
/*position: absolute;绝对定位*/
animation-duration: 5s;
}
/*@keyframes suibianqumingzi {*/
/*from{*/
/**/
/*}*/
/*to{*/
/**/
/*}*/
/*}*/
@keyframes suibianqumingzi {
0%{
left:0;
top:0;
}
25%{
left: 300px;;
top:0;
}
50%{
left: 300px;;
top: 300px;;
}
75%{
left:0;
top: 300px;;
}
100%{
left:0;
top:0;
}
}
.box2{
width: 200px;
height: 200px;
background-color: #00FFFF;
margin:100px auto;
animation-name: d2;
animation-duration: 5s;
/*animation-duration: 5s;运动时间*/
animation-delay: 2s;
}
@keyframes d2 {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="box1"> </div>
<br>
<div class="box2"></div>
</body>
</html>
