CSS Transition (變換動畫)

標籤：style   blog   http   color   os   io   使用   strong   ar   

最近學習CSS的過程中，發現了不少有用的東西。包括一些神奇的，純CSS的特效，只需簡單的幾筆即可完成jQuery實現的效果。

CSS 3 中提供了一種屬性，Transition（變換），這種屬效能夠實現在元素的某些屬性的數值發生改變時產生過渡的效果。比如長度增加，能產生類似拉長的動畫效果；顏色改變時，也可以利用Transition產生一種色彩坡形的效果。

• 轉載原連結地址：http://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html

瀏覽器支援情況

CSS Transition受到瀏覽器的廣泛支援。

Chrome 2+(-webkit-transition)Firefox3.7+(-moz-transition)Safari 3.1+(-webkit-transition)Opera 10.5+(-o-transition)

From:axiu.me

不過經過我的觀察，現在IE還是不能支援，即使是在IE9中。不過也沒有關係，至少並不會出現什麼令人感覺糟糕的結果。

CSS變換的由來

CSS Transition曾經是只屬於Apple Safari Webkit的東西，僅能由Safari UI實現的動畫效果。

可是W3C有部分工作人員認為變換動畫是指令碼該做的事情而不是CSS，不過去年三月份，來自Apple、Mozilla開始將CSS變換模組添加到CSS 3特性裡面，非常接近原來Safari Webkit的效果。由此得來CSS Transition。

書寫方法

在CSS代碼中，要使用Transition屬性需要這麼書寫：

-moz-transition: // Firefox-webkit-transition: // Safari、Chrome-o-transition: // Operatransition: //官方標準

建議在書寫時，將上述全寫上。

效果之：顏色變換

使用Transition可以實現顏色的變換，比如一個錨連結的滑鼠移上產生色彩坡形動畫：

連結

其核心代碼如下：

a:hover { color: red; background-color: rgb(255,204,255); -webkit-transition: color .5s linear, background-color .5s linear;  transition: color .5s linear, background-color .5s linear; }

效果之：展開、伸縮效果

• About Us

其核心代碼如下：

#example2 {height:200px; }#example2 a:link {color: blue;text-decoration: none;-webkit-transition: color .25s ease-in 0s;transition: color .25s ease-out 0s; }#example2 a:hover {color: red;-webkit-transition: color .25s ease-in .1s;transition: color .25s ease-out .1s; }#example2 a:active {color: green;transition: color .25s ease; }#example2 ul {list-style: none;margin: 0;padding: 0;}#example2 .menu {display: block;position: relative;top: .9em;left: 0;padding: 10px;height: auto;width: 100px;border: 8px solid rgba(204,204,204,.5);cursor: pointer;background-color: rgba(255,255,255,.75);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}#example2 ul.menu  li {font-weight: normal;list-style: none;margin:0}#example2 ul.menu  li a:link {font-weight: normal;list-style: none;font-size: 12px;margin-left: 0;padding-left: 0;}#example2 ul.menu ul li {font-weight: normal;padding: 5px 0;margin:0;border-top: 1px solid rgb(204,204,204);background-color: rgb(255,255,255);-webkit-transition: background-color .5s ease; transition: background-color .2s ease; }#example2 .drop {display: block;position: relative;height: 0;overflow: hidden;width: 100px;opacity: 0;-webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s;transition: opacity .25s linear 0s, height .25s ease-out .1s;  }#example2 ul.menu ul li:hover {background-color: rgb(234,234,234);-webkit-transition: background-color .5s ease; transition: background-color .2s ease; }#example2 ul.menu:hover .drop {height: 140px;opacity: 1;-webkit-transition: opacity .25s linear 0s,  height .25s linear 0s;transition: opacity .25s linear 0s,  height .25s linear 0s; }

效果之：位置移動

你可以試想，如果在發生位置之間的改變時，如果使用Transition屬性，則可以做到過渡移動的動畫效果，這非常像是指令碼做出的事情。

位置移動

按住滑鼠不放

其核心代碼如下：

#example3 {background-color: black;color: white;}#example3 .control {text-align: center; font-size: 3em;}#example3 .move { cursor: pointer;}#example3 .move>#astro {position: relative;top: 0;left: 250px;-webkit-transition: top 2s ease-in-out, left 2s ease;transition: top 2s  ease-in-out, left 2s ease;}#example3 .move:active>#astro {top: 10px;left: 10px;-webkit-transition: top 2s ease-in-out, left 2s ease;transition: top 2s  ease-in-out, left 2s ease;}

補充同時添加多種變換

如果你希望你的元素的顏色、背景都發生漸層，例如：

a:hover {  color: red;  background-color: pink;  -webkit-transition: color .25s linear;  transition: color .25s linear;  -webkit-transition: background-color .15s linear .1;  transition: background-color .15s linear .1;}

這並不能達到目的，後面的將會覆蓋掉前面的，因此方法是使用逗號同時使用多種變換效果：

a:hover {  color: red;  background-color: pink;   -webkit-transition: color .25s linear, background-color .15s linear .1s;  transition: color .25s linear, background-color .15s linear .1s; }

變換計時與延遲

如果你希望自訂你的變換效果，比如你希望自訂動畫改變的速率，CSS提供了如下關鍵字可以添加在位尾後：

名稱	如何工作
cubic-bezier(x1, y1, x2, y2)	X 和 Y 值在0到1之間，以定義用於Time function的貝茲路徑的形狀。
linear	均速
ease	逐漸慢下來
ease-in	加速(漸入)
ease-out	減速(淡出)
ease-in-out	加速然後減速

附錄：可以發生變換的屬性

那些屬性可以變換呢？幾乎除了box-shadow以外，其他的都可以發生變換。

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	數字

謝謝收看。

CSS Transition (變換動畫)