CSS3如何讓簡單代碼輕松實(shí)現(xiàn)頁面動畫？
網(wǎng)友解答: 超能網(wǎng)專注于優(yōu)質(zhì)內(nèi)容創(chuàng)作，致力于有價值傳播，歡迎點(diǎn)擊關(guān)注。CSS3過度動畫即為transition屬性，使css屬性的變化是可以連續(xù)的、時間可控制的、可以控制變化曲線的；無論
超能網(wǎng)專注于優(yōu)質(zhì)內(nèi)容創(chuàng)作，致力于有價值傳播，歡迎點(diǎn)擊關(guān)注。
CSS3過度動畫即為transition屬性，使css屬性的變化是可以連續(xù)的、時間可控制的、可以控制變化曲線的；無論是鼠標(biāo)的點(diǎn)擊(click)事件還是鼠標(biāo)的移上事件(hover)，只要通過transition就能讓指定的元素在設(shè)置的時間內(nèi)平滑的發(fā)生改變。首先介紹一下transition，最后附上例子。
transition總共包含了四個屬性，分別是：property(產(chǎn)生動畫的屬性)、duration(設(shè)置整個動畫的時間)、timing-function(設(shè)置動畫的變化曲線)、delay(動畫的初始值或者稱之為動畫發(fā)生的延遲時間)。
transition-property變化的值，例如：{transition-property:width}，這是表示產(chǎn)生變化的是元素的寬度。如果不用單獨(dú)定義不同的變化時間或曲線，可以直接寫為all。(一般方便起見，我們默認(rèn)用all即可)
transition-duration變化的時間?？梢跃_到小數(shù)點(diǎn)后一位，單位s（秒）。例如：{transition-duration:0.4s}。
transition-delay設(shè)置變化的起始值，簡單理解就是如果設(shè)置了transition-delay為0.1秒，變化會從0.1秒開始發(fā)生，也就是會延遲0.1秒才會發(fā)生變化，默認(rèn)為0。
transition-timing-function設(shè)置動畫變化曲線，簡單理解就是動畫按照哪一種函數(shù)來改變運(yùn)行速度。默認(rèn)值為easy，相當(dāng)于 cubic-bezier(0.25, 0.1, 0.25, 1.0).簡單說就是平均變化，速度一樣。
ease-in： 相當(dāng)于 cubic-bezier(0.42, 0, 1.0, 1.0).先慢后快的變化。
ease-out： 相當(dāng)于 cubic-bezier(0, 0, 0.58, 1.0).和ease-out相反，先快后慢的變化。
ease-in-out： 相當(dāng)于 cubic-bezier(0.42, 0, 0.58, 1.0).啟動慢中間快收尾慢的變化，就是兩頭慢，中間運(yùn)動速度快。
linear： 相當(dāng)于 cubic-bezier(0.0, 0.0, 1.0, 1.0).和ease-in-out相反，啟動和收尾快，即為開始與結(jié)束時間段的速度快，中間慢。
ease-out:元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，速 度越來越慢，呈一種減速狀態(tài),先慢后快的變換。等同于貝塞爾曲線 (0，0，0.58，1)。
貝塞爾曲線網(wǎng)址：http://cubic-bezier.com
transition合并的寫法，例如對某個div使用{transition:opacity 0.4s ease 0s}，前面就是表示這個div的透明度發(fā)生變化，整個過程用了0.4s,以easy曲線速度進(jìn)行變化，動畫開始的延遲時間為0s。還可以一次寫多個屬性變化，例如{transition:background, 0.4s ease-out 0s, color 0.4 ease-out 0s;}，為了方便，也可以寫成{transition:all 0.4s ease} 。
另外，我們需要兼顧到瀏覽器的兼容性問題。為了更好的使用過渡動畫，最好在transition前面將下列四大內(nèi)核的兼容前綴加上。瀏覽器兼容性：1. -webkit-: 谷歌、Safari 瀏覽器2. -moz-: 火狐3. -o-: 歐朋4. -ms-: IE瀏覽器
最后舉一個簡單的例子(可以拷貝至代碼編輯器里然后用瀏覽器預(yù)覽一下):<!DOCTYPE html<html<head<meta charset="utf-8"</head<style type="text/css"div{width:200px;height:200px;margin:200px auto;background: tan;-webkit-transition:all 0.6s ease-out 1s;-moz-transition:all 0.6s ease-out 1s;-o-transition:all 0.6s ease-out 1s;-ms-transition:all 0.6s ease-out 1s;}div:hover{height:500px;}</style<body<div</div</body