CSS
<style>
/* 关键帧 */
@keyframes keyname{
0%{
transform: translate(0);
}
50%{
/* 为了让方块走到尾部还能再回来可以先在在时间结束之前让方块走到末尾 */
transform: translate(400px);
}
100%{
transform: translate(0);
}
}
div{
width: 100px;
height: 100px;
background-color: cornflowerblue;
animation: 1s keyname;
/* 动画执行完毕所用的完整时间 */
animation-duration: 5s;
/* 动画延迟执行的时间 */
animation-delay: 1s;
/* 动画执行的方式 常用的值匀速linear */
animation-timing-function: linear;
/* 是否无限循环 常用值ifinite*/
animation-iteration-count: infinite;
/* 是否按照浏览器默认的顺序播放，还是倒着播放 */
animation-direction: reverse;
/* 播放一次的话，播放完要停在哪里或者播放完要设置什么状态，常用的值的forwards指的是执行完停在结束的位置，默认值是none不设定结束的位置或状态，如果是无限循环的动画执行，最后一次执行的状态设定是无效的 */
animation-fill-mode: forwards;
/* 设置播放状体啊 常用场景一个动画在执行的时候通过伪类比如hover 鼠标移入动画停止播放 常用的值是paused */
animation-play-state: paused;
/*
简写的两个规则：
1>执行时间要在延迟时间之前
2>animation必须写的两个值：关键帧名称以及执行时间
*/
}
</style>
HTML
<body>
<div></div>
</body>
测试方块
