使用Keyframes製作純CSS呼吸燈效果按鈕

在開始今天的內容之前，首先來簡單地瞭解一下 Keyframes，Keyframes 是 W3C 草案中 Animation 模組的一部分。在 Keyframes 中，每一組動畫都可以賦予一個名稱，通過它可以靈活地定義元素要執行的動畫。遺憾的是，到目前為止，只有 WebKit 核心的瀏覽器支援這一特性，所以本文右上方那一排表徵圖，只有 Chrome 和 Safari 被點亮。但這並不影響我們學習這一技術，局部差異化開發，一直都是 CSS3 和 HTML5 先行者堅持的立場。另外國內的搜狗瀏覽器在高速模式下，也是使用的 WebKit 核心，極不情願使用 IE 但又不得不用 IE 的同學們可以試一試。

那麼我們開始一步步地製作一個帶呼吸燈效果的按鈕。首先我們在頁面中放置一個 a 標籤，並為它定義好基本的樣式：

        <a href="#" class="demo">Button</a>

a.demo {    display:block;    line-height: 30px;    width: 80px;    text-align: center;    margin: 100px auto;    background: #80CB1B;    font-size: 16px;    padding: 8px 19px 9px;    -moz-box-shadow: 0 0 5px #343434;    -webkit-box-shadow: 0 0 5px #fff;    box-shadow: 0 0 5px #343434;    color: #fff;    font-weight: bold;    padding: 5px 10px;    text-decoration: none;    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);}

為了順利完成最終效果，接下來我們需要瞭解一下如何通過 Keyframes 定義一組動畫，Keyframes 的定義實際上是非常簡單的，下面是 W3C 提供的執行個體代碼：

/** 在實際應用中，應該使用 WebKit 私人屬性 @-webkit-keyframes 作為屬性名稱 **/@keyframes 'wobble' {    0% {      left: 100px;    }    40% {      left: 150px;    }    60% {      left: 75px;    }    100% {      left: 100px;    }}

上面的代碼中，定義了一個名為 wobble 的動畫，它將在動畫開始的時候(0%)，將元素的位置的定位到 100px，然後過渡到 150px，75px，最後在結束動畫的時候(100%)回到起始位置。這實際上是一個讓元素水平擺動的動畫，它看上去非常的簡單。代碼中的 0% 和 100% 可以分別使用 from 和 to 來代替，表示動畫起始和終止時的狀態，其他時候的狀態則使用百分比來定義，對 Flash 有一些瞭解的同學，可以把它理解為 Flash 中的主要畫面格。接下來是我們的呼吸燈按鈕的keyframes 定義，這組動畫被命名為 breathingLight ，並且在動畫起始、結束、和中間位置插入“主要畫面格”，重設元素的背景色和陰影：

@-webkit-keyframes 'breathingLight' {        from {                background-color: #80CB1B;                -webkit-box-shadow:0 0 5px #ccc;        }50% {                background-color: #B7F20F;                -webkit-box-shadow: 0 0 10px #398B08;        }to {                background-color: #80CB1B;                -webkit-box-shadow:0 0 5px #ccc;        }}

keyframes 定義好了以後，需要告訴瀏覽器怎麼去調用剛才定義好的名為 breathingLight 的動畫。很顯然，我們應該在最初添加到頁面中的 a 元素進行設定：

a.demo {-webkit-animation-name: breathingLight;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;}

事實上，到此為止，我們應該已經能夠看到下面的效果了，一呼一吸，一亮一暗，比起以前單調死板的按鈕，顯然更能讓人眼前一亮：

Button

然而，我們仍然需要對上面的代碼進行理解，以便以後能夠靈活地運用。在這個應用中，為了執行動畫，按鈕被添加了 3 個屬性，第一個屬性 -webkit-animation-name，是為元素指定要執行的動畫名，也就是剛才我們定義的 keyframes 。 第二個屬性 -webkit-animation-duration 很好理解，它聲明了一次動畫執行的時間，這裡設定為了3秒。第三個屬性 -webkit-animation-iteration-count 定義了元素執行動畫的次數，預設值是1次，也可以指定次數，這裡的 infinite 顧名思義就是無限地迴圈執行。事實上定義動畫的屬性不只是局限於這 3 個，完整的屬性和它們的用途在下面的表格中，在實際代碼編寫時，記得為這些屬性名稱加上 -webkit 的私人首碼。

屬性	可用值	描述
animation-name	name	動畫名
animation-duration	time	動畫執行的時間
animation-timing-function	ease、linear 等	動畫函數
animation-iteration-count	infinite、number	重複次數
animation-direction	normal | alternate	反轉動畫方向
animation-delay	time	延時

參考資料:

• W3C --- Animations
• Safari Reference Library --- Animations