现代浏览器都内置了专用动画技术，Martin G?rner为您展现四种最棒的实例。
现代移动操作系统将用户接口动画化，并已达到了电脑端交互的标准——精选流畅的动画，体现出沉浸效果以及支持直观的交互。我们都想当然的认为，可以设置一个列表，使之带有运动特性，用手指轻轻一推，它就如同有重量和惯性一样运动起来，直到遇到边缘再反弹回来一点。但是，在网络上，我们还达不到这样的效果。
接受事实吧，现有网上的动画经常被视作UI灾难，还在使用二十年前陈旧的
改变
2013年，现代浏览器内置了专用动画技术，达到60 fps。是时候去忘掉过去，开始构建美妙的UI动画体验了。我将展示四个动画技术，帮助你决定，哪一个更适合你的项目。
CSS3动画——3D
让我们从最简单的声明式技术开始：CSS3。这里不需要JavaScript，存CSS，加上一点现代手段。
CSS通过两种基本属性来声明动画：过渡和动画。过渡属性通知浏览器计算两种状态（由各自CSS定义）间的中间帧。动画通过改变元素CSS触发。比如，当你以编程方式改变它的层，或启动一个:hover CSS。
当缩略图层从开始转变到结束，图像则从一处平滑的移动到另一处，典型的表现为JavaScript DOM动作的结果。
img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }
动画属性最常用于持续运行的动画特效，它还允许自定义中间步骤的动画。
创建一个旋转的图像：
img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}
利用大量CSS属性制作动画具有无限的创造性，你可以根据意图在边框宽度内任意创建动画。 不过，大多数对动画有用的属性都是几何变换和不透明的。CSS3通过易操作的转换属性提供了全系列二维几何变换：平移、旋转、缩放和歪斜。
用旋转、缩放和歪斜创建2D转换：
webkit-transform：旋转30度
webkit-transform：缩小50%
webkit-transform：歪斜-20度，再20度
接下来变得有趣了。如果你觉得在CSS中添加3D效果，技术上是为了粗体和斜体的设计，这很愚蠢，请接着阅读。通过扩展几何转换到三维图像将是一个很自然的方式，相同变换属性还可以做平移X，Y，Z轴以及旋转X，Y，Z轴。
3D旋转图像：
webkit-transform：Y轴旋转45度
再加上点抛出动画效果，看上去就像是一个旋转的三维立方体。
如果确实这般容易的话，就不会有任何趣味性了。设计师留了一点悬念，你可以试一下，只对一个图像进行旋转，浏览器默认渲染出来的效果是不带透视性的：
webkit-transform：Y轴旋转45度
可以添加上透明属性，默认是无穷大极限值也是不带有一点透明效果的。就如同靠近镜头的对象与很远距离外的对象看上去大小一样。
为了确保图像看上去更真实，你还需要指定一个镜头与屏幕之间距离的值。加上-webkitperspective: 1000px就可以了。
一点数学问题：什么是透视性？
要在一块平面屏幕上呈现一个3D对象，首先画出一条线连接眼镜或相机与3D物理上的点。这条线与屏幕的交集就是相应像素所在的位置。为了找到像素在屏幕上的坐标，利用泰勒斯定理，你需要空间中点的3D坐标和相机与屏幕之间的距离（f在光学中也被称为焦距）。这就是视角属性提供的距离。如果这个距离是无限远的，你可以看到所有射线（眼球到3D点线）是水平紧密状的，而且很远很远的对象在屏幕上的大小一样。
现在我们有设置一个3D立方体的所有基础了，利用六个图像以及CSS 3D转换，接下来就可以实现旋转了。
旋转
这一步很简单：我们把一个三维旋转封装到一个div，将会产生如下效果：
浏览器执行你让它所做的步骤：在div渲染一个三维立方体，然后像一张平面图片般在自身运用3D旋转。这是默认效果，虽然不是你想要的。你要告诉浏览器运用嵌套div来构成3D转换，-webkit-transform-style: preserve-3d属性。通过这个，我们就能得到想要的旋转立方体了。
准确获取
很容易在空间失去定位。我的建议是采用一个div，命名为SCENE。这就是透明属性存放的位置。在内部，放置一个命名为OBJECT的div，它应当拥有transform-style: preserve-3d属性，并且该div就是你应用转换移动整个对象的地方。最后，在该div内部，使用3D转换设置你想要的正面图像，创建所需对象。在我们的例子中，立方体的六个面：
.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...
关于3D CSS转换很棒的一点是CSS动画和过渡的完美结合。我们在这留了一个练习，让旋转立方体运动起来，当鼠标光标悬停其上时，立方体自动打开来。操作方法是：把立方体的面移动到与中心一定距离的地方。第二组CSS属性有一个 :hover选择器，将立方体的面放置在更远的距离。通过运用第一种转换属性，你将看到立方体从中心盘旋打开，同时还保持旋转（演示）。
可缩放的矢量图像（SVG）
HTML与CSS都是强大的动画技术，但缺乏绘图基元。SVG能够弥补这点，并拥有其独特的动画标签。SVG动画部分被特定称为同步多媒体集成语言（SMIL）。
首先，SVG是用于矢量基元的，比如矩形、圆形和贝塞尔曲线：
同样可用于：
其中一个基元，
一个二次和三次贝塞尔曲线的例子：
语法：
M x,y ? ? 新的起点 (标记)
L x,y ? ? ?到哪里的直线
Q cx, cy, x, y ?二次贝塞尔曲线到 (x,y)和一个控制点
C cx,cy, dx,dy, x,y 三次贝塞尔曲线到(x, y)和两个控制点
A ? ? ? 椭圆弧
z ? ? ? 字符串最后，用于结束路径
让我们把这些矢量变得更生动化。你可以查看演示，一个家伙踏着滑板翱翔于白云间。
冲浪板上下摆动，小人的嘴巴在大和更大的笑容间交替变化，眼睛滚动，瞳孔扩张。这是SVG动画四种可能的类型。
最简单的一种SVG动画运用
要使瞳孔扩张，需要改变属性列表值中的半径值。
方便的是变化的属性还可以成为
当然，SVG还能进行几何变换，也能做成动画。这里的动画标签是
几何转换的动画：
第三个和最后一个SVG动画标签也很有用。
SMIL有大量控制动画特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函数在全局性开始/停止/暂停一个动画的功能。还在所有三种动画标签(
例如，下面这个SVG按钮被点击后有一个移动的阴影效果：
HTML5绘图
由声明性动画转换到编程性动画技术，
第一个尺寸（标签属性）设置了画布的分辨率，这就是你所使用的坐标空间。第二个尺寸（CSS属性）是画布出现在屏幕上的形状大小。为什么不把画布物理尺寸设置到100%分辨率，内部坐标空间不变，浏览器为任意窗口都能正确渲染图画？非常遗憾，浏览器将画布内容作为点阵图来扫描的，任何扩大范围的结果都将导致模糊混乱的像素。于是，把这两个值设置成相同的值是唯一可行的选项。
初始化画布需要JavaScript中
逐帧动画
画布动画需要设置一个动画循环，你应当基于requestAnimationFrame()函数（带有正确的前缀）。该函数使浏览器能够管理帧率，在浏览器选项卡隐藏时也能停止动画。
function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}
一般来说，画布被用于动画的时候，对象的位置必须是在逐帧的基础上才行，这是因为它们都是物理仿真的结果。观看box2dweb.js教程。仿真不断改变仿真世界中对象的位置，动画循环周期性的在屏幕上展现当前环境状态。
画布SVG精灵
在画布动画中使用SVG精灵是一种很有用的技巧。一个任意复杂性的静态矢量图片在画布上呈现都是繁琐的，这样做实际上可行，虽然不如发送一个.svg到 ctx.drawImage()简单。出于模糊安全的原因，只有内联SVG支持，你必须在Blob API中使用它（代码）。
SVG精灵能够以任意比例展示其矢量美态，但遗憾的是，只支持Chrome浏览器。
使用WebGL
WebGL暴露浏览器运行的JavaScript应用程序OpenGL API，而不需要任何插件。理论上讲，你只需要在
幸运的是我们有Three.js帮助。Three最初是由Mr.doob开发的库，用于一些Chrome演示（
www.ro.me/www.chaostoperfection.com），但它是相对独立的。它拥有所有的基础，以及内置独特的着色器，你就可以专注于其他有用的方面：相机、灯光、行动。
首先要做的是编写Three粘合代码（很简单）：
var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);
在lights和action之前，需创建camera和位置：
// arguments: FOV,viewAspectRatio, zNear, zFarvar camera = new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z = 300;
然后是light：
var light = new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction
我们试着呈现一个立方体吧，3D对象在Three中被称为网络，都由一个几何体和一个材料构成。
我们使用一个简单的结构：
var texture = THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );
最后添加内容，称为渲染函数。
var scene = new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);
这将为我们的立方体产生一个静态图像，为了让它动起来，我们包裹渲染召集一个动画循环，改变立方体在每一帧的位置。
function runAnimation(t){ // animate your objects depending on time cube.rotation.y = t/1000; cube.position.x = ... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}
推荐使用三维建模软件例如Sketchup。Three识别几类3D模型结构，包括COLLADA（.dae）具有广泛行业支撑。下面是如何在Three中加载一个模型：
var loader = new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model = collada.scene; model.position = ...; // x, y, z model.rotation = ...; // x, y, z scene.add(model);} );
再做一些努力，更换机器人外观花式，Three提供兰伯特和冯氏照明风格，法线贴图，凹凸贴图，环境映射以及更多。
还可以使机器人运动起来，具体步骤参考教程。
原文链接：
http://www.gbtags.com/gb/share/2124.htm