這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【用CSS寫一個簡單的幻燈片效果頁面】

1.背景介紹
CSS3屬性中有關於制作動畫的三個屬性：Transform,Transition,Animation。

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

transition是令一個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。

Animation字面上的意思，就是“動畫”的意思，

我們使用CSS3的Animation制作動畫，實現簡單的幻燈片效果，可以省去復雜的js,jquery代碼。Animation有一點不足之處，

我們運用Animation能創建自己想要的一些動畫效果，但是有點粗糙，如果想要制作比較好的動畫，大家還是使用flash或js等。

2.知識剖析
animation: name duration timing-function delay
iteration-count direction fill-mode play-state;

對應：

animation:marginLeft 10s linear 2s infinite
100 reverse paused

在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關鍵幀”。

下面我們就一起來看看這個“Keyframes”是什麽東西。一個動畫初始屬性和最終屬性，

一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，

如果我們要控制的更細一些，比如說我要第一個時間段執行什麽動作，第二個時間段執行什麽動作，

此時我們需要這樣的一個“關鍵幀”來控制。那麽CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。

3.常見問題
@keyframes規則

兼容性該如何解決

4.解決方案
在CSS3中創建動畫，您需要學習@keyframes規則。

Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，

後面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，

有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，

如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，

我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，

比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要註意的是，

我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，

也就是說這個"from"就相當於"0%"而"to"相當於"100%",值得一說的是，

其中"0%"不能像別的屬性取值一樣把百分比符號省略。

Internet Explorer 11、Firefox以及Opera支持@keyframes規則和animation屬性。

5.編碼實戰

6.擴展思考及討論
如何用JQ寫幻燈片效果頁面.

7.參考文獻
參考一：Baidu

參考二：JQ之家

七、PPT鏈接：
ppt鏈接

“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。

這裏是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的聚集地。"

歡迎加IT交流群565734203與大家一起討論交流

用CSS寫一個簡單的幻燈片效果頁面