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