温习一下 CSS 动画
过渡
transition 是指从一种状态到另一种状态（A 到 B）的变化，通常是由某种“动作”触发，比如鼠标悬停，或者用 JavaScript 添加或删除样式类。
transition 的简写形式对应各属性含义如下：
transition: [property] [duration] [delay] [timing-function];
transition-property
通常是简写形式的第一个属性，规定应用过渡的 CSS 属性的名称。比如要修改 background ，就可以在这里写 background 。也可以使用 all ，所有适用的CSS过渡的属性上创建过渡效果（不是所有的属性都可以创建过渡效果的）。
transition-duration
transition-duration 表示过渡效果的持续时间。transition-duration 设置成3s的持续时间是指设置3倍的1000ms。
transition-delay
transition-delay 表示过渡效果的延迟时间（效果开始前的等待时间），单位可以是秒或者毫秒。3s 表示3秒，100ms表示100毫秒，也可以写成0.1s。
transition-timing-function
transition 和 animation 都会使用时间函数（timing function），时间函数有很多可选值。
缓动函数
linear 表示属性值按照一个固定的速度线性的变化，中间不会有突变，所以不会出现加快或减慢的状态。
ease 表示属性值缓慢开始，陡然加速，再逐渐减速至结束。
ease-in 表示属性值先以较慢速度变化，然后速度越来越快，就好比一个球从高处落下，一开始下降的速度很慢，然后越来越快。
ease-out 刚好跟 ease-in 相反，一开始速度快，然后速度越来越慢。最适合元素从屏外进入屏内进行显示的情况。
ease-in-out 是上面两个的合成，一开始慢，然后变快，然后又变慢。做加载的效果时用这个时间函数效果会很不错。
steps 可以将过渡时间分成大小相等的时间时隔来运行。比如使用 steps(4)，效果就会变成如上图那样不连续的效果。
动画
过渡指从一个状态到另一个状态的平滑的变化过程，而动画可以是多个“状态”间的变化。
动画还有一点不同，它可以自动开始。过渡一般需要通过添加样式类或更改状态（如悬停）来触发，但动画可以在页面加载时自动启动。
animation-name
animation-name 指的是动画使用的 keyframes 的名字。
animation-delay
与 transition-delay 类似，此属性表示在开始之前动画的等待时间。在定义多个动画的情况下特别有用。
实际上可以给这个属性一个负值，比如-1s。动画会直接从第1s开始执行，就好像这1s时间已经过去了。
animation-direction
动画通常从 0% 开始，到 100% 结束。animation-direction 使用 normal，reverse，alternate 和 alternate-reverse 来控制动画变化的方向。
animation-duration
动画完成一个周期所需要的时间。类似于 transition-duration，以秒或毫秒计,如1s、200ms。
animation-fill-mode
默认情况下，动画播放完成元素返回其正常状态。使用 animation-fill-mode，我们可以定义元素在动画结束或开始前的状态。
animation-iteration-count
这是动画播放的次数。默认情况下，它将播放一次。也可以指定一个数字，或指定 infinite 值以使其永久循环。
animation-play-state
如果您需要暂停或恢复动画，则可以使用此属性执行操作。值为 running 或 paused，默认为 running。可以使用 JavaScript 设置此值，控制动画播放状态。
animation-timing-function
此属性与 transitions 中定时函数属性的值相同，但略有不同。在 transition里时间函数（例如 ease-out）是作用于整个 transition，但 animation 里是作用于关键帧之间。
示例 Star Wars
