代码如下 `
@keyframes move{
0%{transform:translate(0,0); background-color: red;}
25%{transform:translate(400px,0); background-color: green;}
50%{transform:translate(400px,400px); background-color: blue;}
75%{transform:translate(200px,400px); background-color: pink;}
100%{transform:translate(0,400px); background-color: red;}
}
div{
width: 200px;
height: 200px;
background-color: red;
animation-name: move; /动画名称调用必须写/
animation-duration: 2s;/动画完成一个周期用时/
animation-timing-function: ease;/动画的速率曲线 默认是 ease/
animation-delay: 2s;/动画是否延迟执行,默认为0/
animation-iteration-count: 1;/动画被播放次数，默认为1，还有无限 infinite/
animation-direction: normal;/动画是否在下周期逆向播放，alternate逆播放/
animation-play-state: running;/动画正在运行或者暂停，默认running，还有pause/
animation-fill-mode: forwards;/动画结束后，backwards回到起始位置，/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
