动画效果是情感设计的重要手段，在H5开发中，实现动效需要综合利用 JavaScript、CSS(3)、SVG、Canvas 等多种 Web 技术手段才能开发出动人的网页动态效果。
接下来，我们把重心放在 CSS3 动画上面，因为 CSS3 在现如今的网页动效开发中占据着最为重要的一席，作为老大哥 CSS 的补充，它像是专门为「H5 开发」量身定制的动效武器。
CSS3 Transition
在 CSS3 的世界里，让网页元素动起来的第一个方法是利用 transition，基于 transition 可以让元素的某个 CSS 属性从指定的开始状态过渡到特定的结束状态。我们将元素「从指定的开始状态过渡到特定的结束状态」这个过程简称为「状态变换」，注意这里的过渡，事实上 transition 便像是页面元素「状态变换」的润滑剂，如果没有 transition，元素「状态变换」的过程将会显得生硬而突兀（如下图中左边的小圆球，查看DEMO）。
图片
transition 可作用于普通的 CSS 属性（如 background 、opacity …），也可以作用于 CSS3 出现时新引入的 transform 属性，而利用后者可以实现 3D 的过渡效果。
3D 过渡动效
如前面所说，利用 transi