<div class="move">
</div>
.move{
width: 40px;
height: 40px;
border-radius: 50%;
background: rgb(255, 136, 0);
animation: move 3s linear 5 alternate both;
}
.move:hover{
animation-play-state: paused;
}
@keyframes move{
0%{
transform: translate(0,0)
}
100%{
transform: translate(200px,0)
}
}
/* 等价于 */
/* @keyframes move{
from{
transform: translate(0,0)
}
to{
transform: translate(200px,0)
}
} */
/* CSS 动画用百分比来刻画一个动画周期，from 其实是 0% 的别称，to 是 100% 的别称。 */
/* animation-duration
指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。
animation-timing-function
指定动画计时函数，即动画的速度曲线，默认是 "ease"。
常见值有：linear、ease、ease-in、ease-out、ease-in-out。
需要提一下，计时函数属性另外的一个好玩的值是 steps 函数，可以用来实现逐帧动画：
animation-delay
指定动画延迟时间，即动画何时开始，默认是 0。
animation-iteration-count
指定动画播放的次数，默认是 1。注意，无限播放时使用 infinite
animation-direction
指定动画播放的方向。
其值有：
normal 默认值。
reverse 表示动画反向播放。
alternate 表示正向和反向交叉进行。
alternate-reverse 表示反向和正向交叉进行。
animation-fill-mode
指定动画填充模式。默认是 none。
另外 3 个值：
forwards，表示，动画完成后，元素状态保持为最后一帧的状态。
backwards，表示，有动画延迟时，动画开始前，元素状态保持为第一帧的状态。
both，表示上述二者效果都有。
animation-play-state
指定动画播放状态，正在运行或暂停。默认是 running。
paused 表示暂停：
animation-name
指定 @keyframes 动画的名称。 */