如何创作网页元素动画？

网友解答: 在flash、安卓或者H5页面中，所有的动画组成元素无非就是位移、旋转、缩放、颜色（透明度、亮度、色彩），在时间轴上的变化。而其中h5的动画主要是由css来完成的，当然js或

在flash、安卓或者H5页面中，所有的动画组成元素无非就是位移、旋转、缩放、颜色（透明度、亮度、色彩），在时间轴上的变化。

而其中h5的动画主要是由css来完成的，当然js或jquery也有一些简单的动画函数。今天就给你全面介绍一下h5前端动画。更详细的内容可以去我的主页，需要代码的可以百度搜索“栾鹏全栈”到我的csdn博客复制下载。

1）、定义和用法

2）、兼容性

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

3）、代码示例

1）、定义和用法

先使用@keyframes定义一个动画，再使用animation属性将该动画绑定到元素上。

2）、兼容性

IE使用@keyframes定义，Firefox使用@-moz-keyframes定义，Safari 和 Chrome使用@-webkit-keyframes定义，Opera使用@-o-keyframes定义。

IE使用animation绑定，Firefox使用-moz-animation绑定，Safari 和 Chrome使用 -webkit-animation绑定Opera使用-o-animation绑定

3）、代码示例

1）、显示隐藏

hide/show(speed,callback)函数

2）、透明度

fadeIn/fadeOut(speed,easing,callback)函数

3）、滑动

slideUp/slideDown(speed,callback)会改变元素的display属性

4）、自定义动画

animate({params},speed,callback);

原生js利用设置周期性事件改变元素属性实现动画，复杂动画的代码量很大

使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。

使用通过以上方法封装好的插件，直接调用如：waves，textillate.js等等。

虽然在工程师的角度上使用gif图很low，但是，用户的体验是没有影响的。