代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box1
{
width: 100px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation-name: sport;
animation-duration: 5s;
}
@keyframes sport
{
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: yellow;
margin: 100 auto;
animation-name: cyg;
animation-duration: 5s;
animation-delay: 2s;
/*
通过我们的观察, 动画是有一定的状态的
1.等待状态
2.执行状态
3.结束状态
*/
/*
animation-fill-mode作用:
指定动画等待状态和结束状态的样式
取值:
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
*/
/*animation-fill-mode: backwards;最后的时候保持第一帧的状态*/
animation-fill-mode: both;/*开始的时候第一帧的状态·，结束保持最后一帧的状态*/
/*animation-fill-mode: forwards;最后的时候保持最后一帧的状态*/
}
@keyframes cyg{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
