[轉]WebKit CSS3 動畫基礎

前幾天在Qzone上看到css3動畫，很是神奇，因此也學習了一下。首先看看效果http://www.css88.com/demo/css3_Animation/

很悲劇的是css3動畫如今只有WebKit內核的瀏覽器（Safari和Chrome）支持，雖然應用還不是時候，可是效果卻不可低估。

在哪裏定義動畫效果？

css3動畫通常經過鼠標事件或者說狀態定義動畫，一般咱們能夠用CSS中僞類和js中的鼠標事件來定義。

動態僞類	起做用的元素	描述
:link	只有連接	未訪問的連接
:visited	只有連接	訪問過的連接
:hover	全部元素	鼠標通過元素
:active	全部元素	鼠標點擊元素
:focus	全部可被選中的元素	元素被選中

js的事件也能夠，好比click，focus，mousemove,mouseover,mouseout等等

transition的基本語法：

css3動畫經過transition屬性和其餘css屬性（顏色，寬高，變形，位置等等）配合來實現。

transition的語法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

固然這是簡寫，咱們也能夠完整的寫：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

 

要變化的屬性

transition-property:要變化的屬性，好比元素變寬則是width，文字顏色要變色這是color；W3C給出了一個可變換屬性的列表：

CSS屬性	改變的對象
background-color	色彩
background-image	只是漸變
background-position	百分比，長度
border-bottom-color	色彩
border-bottom-width	長度
border-color	色彩
border-left-color	色彩
border-left-width	長度
border-right-color	色彩
border-right-width	長度
border-spacing	長度
border-top-color	色彩
border-top-width	長度
border-width	長度
bottom	百分比，長度
color	色彩
crop	百分比
font-size	百分比，長度
font-weight	數字
grid-*	數量
height	百分比，長度
left	百分比，長度
letter-spacing	長度
line-height	百分比，長度，數字
margin-bottom	長度
margin-left	長度
margin-right	長度
margin-top	長度
max-height	百分比，長度
max-width	百分比，長度
min-height	百分比，長度
min-width	百分比，長度
opacity	數字
outline-color	色彩
outline-offset	整數
outline-width	長度
padding-bottom	長度
padding-left	長度
padding-right	長度
padding-top	長度
right	百分比，長度
text-indent	百分比，長度
text-shadow	陰影
top	百分比，長度
vertical-align	百分比，長度，關鍵詞
visibility	可見性
width	百分比，長度
word-spacing	百分比，長度
z-index	正整數
zoom	數字

該取值還有個強大的「all」取值，表示上表全部屬性；

除了以上屬性外，固然還有css3中大放異彩的css3變形，好比放大縮小，旋轉斜切，漸變等等。

動畫時間

transition-duration ：動畫執行的時間，以秒爲單位，好比0.1秒能夠寫成」0.1s」或者」.1s」，注意後面有個「s」單位。

動畫執行的計算方式

transition-timing-function ：動畫執行的計算方式，這裏時間函數是使人崩潰的貝塞爾曲線，幸虧css3提過了幾個取值：

ease：逐漸慢下來，函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

linear：線性過分,函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

ease-in：由慢到快,函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

ease-out：由快到慢, 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

ease-in-out：由慢到快在到慢, 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。

動畫延遲

transition-delay：在動做和變換開始之間等待多久，一般用秒來表示(好比, .1s)。若是你不想延遲，該值可省略。

 

 

 

重疊動畫

常常會碰到同一元素會有多個動畫同時執行的時侯，好比文字顏色和背景同時變化：

-webkit-transition: color .25s linear , background-color 1s linear;

和transform(變形)結合的一些動畫

這時候transition-property建議取值爲「all」；關於css3 transform(變形)屬性請查看

http://www.css88.com/archives/2168

 

好比放大縮小：

#blah { -webkit-transition: all .3s ease-in-out; }

#blah:hover { -webkit-transform: scale(1.5); }

旋轉：

.arrow { -webkit-transition: all 1s ease-in-out;}

.arrow:hover  {-webkit-transform: rotate(720deg);}

 

作了幾個案例，demo：http://www.css88.com/demo/css3_Animation/

還能夠看老外的demo：http://webdeveloperjuice.com/demos/css/css3effects.html

=================

參考閱讀：

http://www.qianduan.net/css-transitions-101.html

http://www.zhangxinxu.com/wordpress/?p=498

http://fis.io/css-3-hover-animations.html

 

其餘文章：

https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitions

http://www.qianduan.net/css-transitions-101.html

http://www.w3school.com.cn/css3/css3_animation.asp

http://www.w3school.com.cn/cssref/pr_transition.asp