现在这个图像应用的动画播放一次就会结束了 .. 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 .. 这样这个动画会一直播放下去 ...