现在我们会使用具有互动性的简单渐变效果了，接着要来试着让网页能增添更多活力，不需要我们操作，就会自动播放动画效果。

什麽是 animation？

animation 就如同字面上的意思，动画赋予了 CSS 更多的可能性，让画面可以更加生动活泼，以往要透过 Javascript 才能完成的效果，如今 CSS 也能帮忙分担一些画面效果，记住一句话，能使用 CSS 完成效果，就尽量使用 CSS。

CSS animation 起手式

关键影格 keyframes

一开始的起手式当然就是先定义一个动画效果，使用方法为@keyframes <name> { animation_css }，有在制作动画影片的应该对 keyframes（关键影格） 这个字非常熟悉，藉由着个语法，来让浏览器运算产生动态画面，其中<name>可以自定义动画名称，{}内为动画执行过程，执行过程可以用 0% ～ 100%，或使用关键字 from & to。

例如，想让封面图的方块旋转，可以使用上一章的 transform: rotateY() 依靠 Y 轴为轴心进行旋转：

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

套用 CSS animation

animation-name

动画名称，注意 这个一定要设置，不然浏览器不知道你要套用的动画名称是什麽，除非它会通灵，以上面关键影格为例animation-name: rotate;

animation-duration

动画动完一次所需时间，注意 这个也一定要设置，因为预设是 0，不会动的动画还叫动画？以上面关键影格为例animation-duration: 5s;，需 注意 单位名称一定要打，s 代表 秒，ms 代表 毫秒。

animation-delay

动画延迟多久时间开始播放，这个看需求设置，与上面的设定方法雷同。

animation-iteration-count

动画循环几次，这个也是看需求设置，预设是 1，执行 1 次的意思。

想要无限循环多次？

想要无限循环多次，可以设定 infinite，以上面关键影格为例animation-iteration-count: infinite;

animation-timing-function

动画加速度的函式，预设是 ease

animation-time-function Codepen

具有加减速的速度函式

这个动态效果比较流畅

• ease
• ease-in
• ease-out
• ease-in-out

（图片来源）

线性速度函式

不具有加减速

• linear 线性，此封面范例就是使用这个 animation-time-function: linear;

（图片来源）

影格速度函式

就像胶片影格一样，一步一步展示变化过程，int 设置正整数，数字越大越流畅。
第二个参数，start 会忽略第 0 秒的开始动画，end 会忽略最後一秒的结束动画

• steps(int,start/end)

自定义速度函式（贝兹曲线）

这就比较复杂了，由四个参数来设置贝兹曲线，设置的好会像皮球弹跳一样自然来回，设置不好就会失控。

• cubic-bezier(n,n,n,n)

animation-direction

控制动画是否反转播放，预设值为 normal 正常播放

• normal，正常播放
• reverse：反转播放，从 100% 到 0% 反着播。
• alternate：上面两个的结合，正反播放轮替，先正後反，如此循环，当播放次数设 1 时，就正常播放
• alternate-reverse：与 alternate 的相反，变成先反後正，当播放次数设 1 时，就反转播放

此图范例为使用 animation-direction: alternate;，Codepen

简写方式

根据上面封面的动画效果，原本是这样使用

animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-time-function: linear;

可以看到一直反覆的写 animation- 开头，而简写方式非常简单

animation: rotate 5s infinite linear;

直接用 animation 就可以设定所有动画设定了，需注意 动画名称 与 时间 是一定要写的，如果要设置 delay，第一个时间参数会是 持续时间，第二个时间参数会是 延迟时间！

总结

平面动画写起来还算简单，很有成就感，如果要涉及到 3D 层面的话，又会需要多设定一些东西，如同前一篇所讲，视角与定位点，会更加抽象，现阶段 CSS 已经告个段落了！明天就要进入我们的 Javascript 章节了！

参考资料

• 完整解析 CSS 动画