html5 動(dòng)畫過渡效果,HTML5動(dòng)畫過度與動(dòng)畫效果

1、html5 動(dòng)畫過渡效果,html5動(dòng)畫過度與動(dòng)畫效果1、動(dòng)畫過渡屬性 transition1、transition的功能定義transition的功能，使css的屬性值在一定的時(shí)光內(nèi)平滑地過渡。 這種效果可以在鼠標(biāo)點(diǎn)擊、劃過、獲得焦點(diǎn)或?qū)υ厝魏无D(zhuǎn)變中觸發(fā)，并圓滑地以動(dòng)畫效果轉(zhuǎn)變css的屬性值。2、transition可定義的屬性transition-property:設(shè)置哪些屬性舉行過渡 transition-duration：完成過渡動(dòng)畫效果的時(shí)光，默認(rèn)是0。 transition-timing-function:設(shè)置動(dòng)畫的緩動(dòng)效果，默認(rèn)是ease(逐漸變慢)。 其它常用值：ease-i

2、n，加速； ease-out，減速； ease-in-otlt,加速然后減速。 transition-delay:設(shè)置動(dòng)畫開頭的延遲時(shí)光，默認(rèn)是03、代碼示例transition-示例-ruo.l.boxwidth: 100px;height:100px;margin:50px auto;background-color:f00;transition:all 1s;.box:hoverwidth:200px;height:200px;border-radius:50%;background-color:666;transition:all 1s ease-in 1s;2、動(dòng)畫效果屬性 anim

3、ation1、animation 定義"關(guān)鍵幀"(keyframes),它的樣式規(guī)章是由多個(gè)百分比構(gòu)成的，如"0"到 "100"之間，分離在每一個(gè)百分比中，加上不同的屬性，從而讓元素達(dá)到一種 在不斷變幻的效果。語規(guī)矩則如下： keyframes 動(dòng)畫名稱 0元素狀態(tài) 100元素狀態(tài) 2、animation屬性animation-name:keyframes動(dòng)畫的名稱 animation-duration：動(dòng)畫完成一個(gè)周期所花費(fèi)的時(shí)光，默認(rèn)是0。 animation-timing-func

4、tion:動(dòng)畫的速度曲線(緩動(dòng)效果)，默認(rèn)是"ease"。 animation-delay:動(dòng)畫開頭的延遲時(shí)光，默認(rèn)是0。 animation-iteration-count:動(dòng)畫被播放的次數(shù)，默認(rèn)是1。 animation-direction:動(dòng)畫是否在下一周期逆向地播放，默認(rèn)是"normal"。 animation-play-state:動(dòng)畫是否正在運(yùn)行或暫停，默認(rèn)是"running"。 animation-fill-mode：對(duì)象動(dòng)畫時(shí)光之外的狀態(tài)。3、代碼示例animation-示例-ruo.l.boxwidth: 100px;height:100px;margin:50px auto;background-color:f00;.box:hover-webkit-animation:hover 1s ease-in infinite;-webkit-keyframes hover0%width:100px;height:100px;border-radius:40%;50%width:200px;height:200px;bo