alternate
alternate意為“交替”，即normal和reverse交替之行，先normal再reverse 。
reverse alternate
反向交替，先reverse再normal 。
(4) Animation Timing function
和transition一樣，keyframes也可以設(shè)置timing function，常用的timing function歸納如下：
ease：默認(rèn)方法，初速度較慢，然后加速再減速
ease-in：初速度最慢，然后一直加速
ease-out：初速度最快，然后一直減速
ease-in-out：初速度較慢，然后加速再減速，與ease的區(qū)別在于加速減速過程是對稱的
linear：恒速運(yùn)動
直觀表現(xiàn)如下(codepen)：
除了上面現(xiàn)成的方法，我們可以通過貝塞爾曲線自定義速度曲線 。我們可以在 http://cubic-bezier.com 可視化的創(chuàng)建我們自己的貝塞爾曲線 。比如創(chuàng)建一個剛開始極慢，突然變得極快的曲線：
css:
效果：
是不是挺神奇!
(5) Chain Animation
我們可以將多個animation串聯(lián)使用，比如我們想讓小人在行駛的過程中跳躍，可以這么寫：
css:
效果：
實踐
本文目的在于普及css3 animation的基礎(chǔ)，并未完全覆蓋animation的知識，未涉及和講解的知識請大家見諒。掌握上述知識后，我們就已經(jīng)可以用animation做出豐富的動畫效果了，下面列出一些codepen上的小例子：
full mario demo
animated popup
fly items to shopping cart
flipping cards
推薦閱讀
- 多普達(dá)568新手入門
- css3.0新屬性效果在ie下的解決方案介紹
- 新手入門如何查看903sh版本
- 讓IE6/IE7/IE8支持CSS3屬性的辦法有哪些？支持CSS3屬性8種方法介紹
- 3250新手入門
- 讓IE6、IE7、IE8支持CSS3的圓角、陰影樣式
- ie-css3.htc 讓IE6, 7, and 8也支持box-shadow
- 主要針對566以及586等Q屏手機(jī) 給smartphone新手入門和軟件推薦
- 解讀MOTO ROKR E2之入門使用
- IE下實現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法