1.css3的transition属性
transition只需指定动画的开始和结束状态,整个动画的过程是由特定的函数控制,你不用管它
2.css3的animation属性
animation可以对动画过程中的各个关键帧进行设置
3.原生JS动画
通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果
4.使用canvas绘制动画
Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。
5.SVG动画
SVG是一种基于XML的图像格式,非常类似于HTML的工作方式。它为许多熟悉的几何形状定义了不同的元素,这些元素可以在标记中组合以产生二维图形; 同样高清的质地,矢量图不畏惧放大,体积小。
6.Jquery的animate函数
animate()
方法执行 CSS
属性集的自定义动画;该方法通过 CSS 样式将元素从一个状态改变为另一个状态。
7.使用gif图片
图形交换格式
总结:
- 代码复杂度方面简单动画:
css
代码实现会简单一些,js
复杂一些。 复杂动画的话:css
代码就会变得冗长,js
实现起来更优。 - 动画运行时,对动画的控制程度上
js
比较灵活,能控制动画暂停,取消,终止等css
动画不能添加事件,只能设置固定节点进行什么样的过渡动画。 - 兼容方面
css
有浏览器兼容问题js
大多情况下是没有的。 - 性能方面
css
动画相对于优一些,css
动画通过GUI
解析js
动画需要经过js
引擎代码解析,然后再进行GUI
解析渲染。