HTML部分
<body>
<div class="box"></div>
</body>
css部分
// 设置背景颜色
body {
background: #333;
}
.box {
background: #fff; // 设置显眼的颜色
width: 200px; // 固定宽，为了看的见
height: 200px; // 固定高，为了看的见
position: relative; // 相对定位
animation-name: myanimation; // 动画名字，指定关键帧的名字就可以，细节在下面的定义
animation-duration: 4s; // 动画持续时间，间接控制速率，越长越慢！
}
// 定义关键帧
@keyframes myanimation {
// 必须。在动画开始时，关键帧的位置
0% {
background: #fff;
left: 0;
top: 0;
}
// 在动画四分之一时，关键帧的位置
25% {
background: #f00;
left: 300px;
top: 0;
}
// 在动画一半时，关键帧的位置
50% {
background: #0f0;
left: 300px;
top: 300px;
}
// 在动画四分之三时，关键帧的位置
75% {
background: #00f;
left: 0;
top: 300px;
}
// 必须，在动画结束时，关键帧的位置
100% {
background: #fff;
left: 0;
top: 0;
}
}
标签：关键帧,动画,top,300px,background,left From： https://www.cnblogs.com/panax/p/17533845.html