现在这个图像应用的动画播放一次就会结束了 .. animation-iteration-count 这个属性可以控制动画的播放的次数 ... 先把它设置成 2 ... 现在动画会播放两次 ..

animation-direction .. 这个属性可以控制动画的方向 .. 默认它的值是 normal ... 也就是动画一开始就是它的 from ，或者 0% .. 结束的地方是 to 或者 100% ..

把这个属性的值设置成 reverse ... 可以颠倒动画的顺序 ...

或者我们也可以把它设置成 alternate ... 这样动画会从 0% 到 100%，然后又会从 100% 到 0% ..

动画的加速的效果可以使用 animation-timing-function 去控制 ... 默认它的值是 ease ... 我们可以用 cubic-bezier 去自己定制一下这个加速效果 ..

我们可以再去修改一下这个动画 .. 把 from 换成 0% .. 把 to 换成 100% ... 它们中间，我们可以再添加一个关键帧 .. 比如在 50% 这个位置上添加一个 ... 在它里面再设置一下元素在 Y 轴的位置 ... 让它等于 0 ..

再预览一下这个动画 ...

元素的开始位置是向上 100 像素，再移动到它本身的位置，然后向下再移动 100 个像素 ...

这些 animation 属性还有一个简单的形式 ... 直接可以使用一个 animation .. 先是动画的名字 .. 然后是 timing function .. 持续的时间 ... 播放的次数 .. 还有动画的方向 ..

animation: animation-demo cubic-bezier(1, 0, 0, 1) 2s 2 alternate;

注释掉这些具体的 animation 属性 ... 再去预览一下这个动画 ...

这个播放的次数我们可以设置成 infinite .. 这样这个动画会一直播放下去 ...