CSS3動畫之二 Animations功能

animations功能與transitions功能相同，都是通過改變元素的屬性值來實現動畫效果，不同之處是：transitions功能只能通過改變指定屬性的開始值與結束值，然後再這兩個屬性值之間進行平滑的過渡來實現動畫效果。所以transitions功能不能實現比較複雜的動畫效果；animations功能可以定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現複雜的動畫效果。

首先明白了animations功能的工作原理，下面就通過乙個例項來看一下animations功能的用法：（到目前為止safari 4+、chrome 2+對animations功能提供支援）。

**如下：

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>animations功能使用方法
title
>
6<
style
>
7div 
10@-webkit-keyframes mycolor 
1440% 
1770% 
20100% 23}
24div:hover 
29style
>
30head
>
31<
body
>
32<
div>動畫文字
div>
33body
>
34html
>

分析一下以上**，主要有如下幾個關鍵幀，通過這些關鍵幀之間的平滑過渡完成了動畫效果：

1. 開始幀：0% 這時候，在chrome中，div元素的背景色為紅色；

2. 背景色為深藍色的關鍵幀：40% 這時候，在chrome中，div元素的背景色為深藍色；

3. 背景色為黃色的關鍵幀：70& 在整個動畫過程的70%處這幀的背景色為黃色；

4. 結束幀：100% 整個動畫介紹的最後一幀為結束幀，結束幀之後，元素的屬性不再發生變化，結束幀與開始幀的頁面顯示完全相同，div元素的背景色都是紅色。

建立關鍵幀的方法是：@keyframes /關鍵幀集合名/ ，上面的例子當中關鍵幀集合的名稱是「mycolor」；如果是safari或chrome，要在屬性前加上「-webkit-」字首，如果是firefox，則加上「-moz-」字首。像「@-webkit-keyframes」或「@-moz-keyframes」這樣。

建立關鍵幀的**類似這樣：40% ，本例中的**：40% ，這裡的40%表示改幀位於整個動畫過程的40%處，開始幀為0%，結束幀為100%。關鍵幀可以在0%-100%之間任意設定。本例在70%處設定了乙個關鍵幀，背景色為黃色。這樣div元素的背景色就在紅色，深藍色，黃色這三個顏色之間平滑過渡。

關鍵幀的集合建立完成後，就要在元素的樣式中來使用它，通過div元素的偽類:hover可以來觸發執行動畫，如果是其他元素，比如還可以通過:focus偽類觸發來執行動畫。**如下：

div:hover

animation-name屬性中指定關鍵幀集合的名稱，animation-duration屬性中指定完成動畫所用的時間，animation-timing-function屬性中指定實現動畫的方法。transitions功能可以實現多個屬性值同時改變的動畫，那麼animations功能可不可以實現多個屬性值同時改變的動畫呢？當然可以，下面看乙個示例，基於上面那個示例修改而來，在動畫中，不僅完成三種背景色之間的平滑過渡，而且在背景色為深藍色的關鍵幀中，讓div元素順時針旋轉30度，在背景色為黃色的關鍵幀中，讓div元素逆時針旋轉30度。**如下：

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>animations功能使用方法
title
>
6<
style
>
7div 
13@-webkit-keyframes 'wobble' 
1840% 
2270% 
26100% 30}
31div:hover 
36style
>
37head
>
38<
body
>
39<
div>動畫區域
div>
40body
>
41html
>

div:hover

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值可取正負值陰影垂直偏移值可取正負值陰影模糊值陰影顏色設定塊陰影 box shadow這個屬性應用的非常普遍，可以使你的元素立刻變得漂亮起來，只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3動畫之二 Animations功能

CSS3屬性之二 box shadow

CSS3屬性之二 box shadow

CSS3屬性之二 box shadow

相關推薦