網(wǎng)友解答: 在flash、安卓或者H5頁(yè)面中，所有的動(dòng)畫(huà)組成元素?zé)o非就是位移、旋轉(zhuǎn)、縮放、顏色（透明度、亮度、色彩），在時(shí)間軸上的變化。而其中h5的動(dòng)畫(huà)主要是由css來(lái)完成的，當(dāng)然js或

在flash、安卓或者H5頁(yè)面中，所有的動(dòng)畫(huà)組成元素?zé)o非就是位移、旋轉(zhuǎn)、縮放、顏色（透明度、亮度、色彩），在時(shí)間軸上的變化。

而其中h5的動(dòng)畫(huà)主要是由css來(lái)完成的，當(dāng)然js或jquery也有一些簡(jiǎn)單的動(dòng)畫(huà)函數(shù)。今天就給你全面介紹一下h5前端動(dòng)畫(huà)。更詳細(xì)的內(nèi)容可以去我的主頁(yè)，需要代碼的可以百度搜索“欒鵬全?！钡轿业腸sdn博客復(fù)制下載。

1）、定義和用法

2）、兼容性

Firefox使用-moz-transition定義、Safari 和 Chrome使用-webkit-transition定義，Opera 使用-o-transition定義。

3）、代碼示例

1）、定義和用法

先使用@keyframes定義一個(gè)動(dòng)畫(huà)，再使用animation屬性將該動(dòng)畫(huà)綁定到元素上。

2）、兼容性

IE使用@keyframes定義，F(xiàn)irefox使用@-moz-keyframes定義，Safari 和 Chrome使用@-webkit-keyframes定義，Opera使用@-o-keyframes定義。

IE使用animation綁定，F(xiàn)irefox使用-moz-animation綁定，Safari 和 Chrome使用 -webkit-animation綁定Opera使用-o-animation綁定

3）、代碼示例

1）、顯示隱藏

hide/show(speed,callback)函數(shù)

2）、透明度

fadeIn/fadeOut(speed,easing,callback)函數(shù)

3）、滑動(dòng)

slideUp/slideDown(speed,callback)會(huì)改變?cè)氐膁isplay屬性

4）、自定義動(dòng)畫(huà)

animate({params},speed,callback);

原生js利用設(shè)置周期性事件改變?cè)貙傩詫?shí)現(xiàn)動(dòng)畫(huà)，復(fù)雜動(dòng)畫(huà)的代碼量很大

使用canvas在瀏覽器上畫(huà)圖，并且利用其api，制作動(dòng)畫(huà)。canvas使用的地方非常多，尤其是在制作h5小游戲上。

使用通過(guò)以上方法封裝好的插件，直接調(diào)用如：waves，textillate.js等等。

雖然在工程師的角度上使用gif圖很low，但是，用戶(hù)的體驗(yàn)是沒(méi)有影響的。