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

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

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

1）、定義和用法

2）、兼容性

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

3）、代碼示例

1）、定義和用法

先使用@keyframes定義一個動畫，再使用animation屬性將該動畫綁定到元素上。

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）、滑動

slideUp/slideDown(speed,callback)會改變元素的display屬性

4）、自定義動畫

animate({params},speed,callback);

原生js利用設(shè)置周期性事件改變元素屬性實現(xiàn)動畫，復(fù)雜動畫的代碼量很大

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

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

雖然在工程師的角度上使用gif圖很low，但是，用戶的體驗是沒有影響的。