css3 补间动画基础
首先要说的是补间动画不是css3所特有的，补间动画又叫关键帧动画，最早是flash里的一种动画形式，同时也是动画形式中最基础的一种。与它相对应的是动画片中常用的逐帧动画形式。补间动画以一个或几个元素为主体，在一段时间内，将该主体各属性的一个值变为另一个值。为什么称之为补间，就是因为中间的动画过程由计算机自动渲染而成，我们只用设置动画开始与结束状态时的属性就可以了。当然这些属性必须时计算机能够识别的才行，所以这些属性往往都有一个值，或者一个公式算法。综上可知，补间动画是一种有规律的动画，通过对各个属性的设置，机器就可自动生成。这个相对于传统的逐帧动画，可以大大降低人工成本，同时也一定程度的使得动画的门槛有所降低。
主体
这里的主体必须是一个整体，即使这个主体是由多个元素组成的，那动画也是对多个元素一起的整体起作用，不是对里面某个元素起作用。
时间（Time）
动画相对于静态图像的最大区别就是多了一个时间维度。通过在不同的时间点展现不同的内容，动画让原本静止的画面更加的丰富和饱满。在补间动画中，时间就是一个正向坐标轴。你可以设置动画的开始时间或必要条件，但时间永远是一个单向的正值。
时间往往是决定动画速度主要指标。因为不管在动画制作也好，代码实现也好，主体的初始属性和最终属性，都是设定好的，有一定依据的， 不方便调整。动画的快慢便取决于播放时间。同时，从代码角度修改动画的时间值，比修改属性值，成本和风险都要小一些。
属性（Properties）
关于主体的属性，这里会有很多，如：坐标、长宽、旋转角度、颜色、透明度，等等。里面有些属性可能会包含多个值，如旋转角度，除了度数外还要表明旋转的中心坐标。除了这些常见的属性外，还有一类叫滤镜属性，如模糊、锐化等。这些如果要运用到产品中最好提前跟前端开发做好沟通，看如何实施比较合适，因为这些滤镜属性往往需要机器做实时渲染，对资源是很大的消耗。虽然，随着硬件性能的高速发展，在不久的将来，这些性能的消耗可能并不算什么。但在现如今，如果要做一个可以落地的产品时，最好提前做相应的评估和取舍。
Flash、After Effects和Edge Animate中的常用属性：
css3中常用的各属性：
关键帧（Keyframes）
在补间动画中，物体属性由一个值变为另一个值，但很多时候是在三个值或者更多的之前做变换，同时，不同属性之间，值的变化往往在时间上也不是同步的。所以我们要引入关键帧的概念。 关键帧其实就是时间轴上属性值的节点。每个节点都同时包含了：主体，属性值，时间点这些信息。补间动画便是根据这些信息进行自动运算形成动画的。
Flash中的关键帧：
Edge Animate中的关键帧：
css3中对于关键帧的使用：
速度曲线（Csaser）
速度曲线或者叫做运动曲线，是补间动画运动过程中的一个重要指标。通过曲线的不同，补间运动可以模拟出许多现实世界的运动效果。如悬浮的小球，抛弃的钱币，钟摆等。通过不同的运动状态，又从一个侧面体现很多运动场景中的属性，如主体的质量，推力，引力，摩擦力等等。同时，当多个补间在一起时，不同的速度曲线也可以让整体更加富有律动和节奏。这个和不同类型的舞蹈给人不同的感受是一个道理。
五个滑块在同样的时间内用不同的速度曲线完成同样长度：
速度曲线的实现在动画软件和代码中的实现都基本相似，但也略有不同。首先，在flash中曲线设置是在属性面板下的tweening栏下，默认可以设置easeIn或easeOut的幅度：-100至100。如果要设置复杂的曲线可以点击铅笔图标打开曲线面板手动调节。在AE中曲线是在graph editor图表编辑面板中设置,它除了像flash中提供了动画与时间的维度曲线编辑方式，还提供了速度与时间维度的曲线编辑。同时，AE中的曲线和CSS中的一样，可以直接做出回弹的效果。这个在flash中是无法在一个补间中完成的。在CSS3中都会包括这么几种常见的速度曲线：ease、easeIn、easeOut、easeInOut。同时也支持自定义贝塞尔曲线，例如：(1,-0.53,0.405,1.425)。下面列举下速度曲线在flash，AE及CSS中的截图。
flash中的速度曲线：
AE中的速度曲线：
Edge Animate中的速度曲线：
CSS3中的速度曲线：
如果要在CSS3中自定义贝塞尔曲线可以在下面这个网站设定：http://matthewlein.com/ceaser/
CSS3中默认的5种缓动曲线（红色为动画、蓝色为速度）：
当然我们也可以自己定制欢动曲线：http://cubic-bezier.com/
以上，就是补间动画的基础构成。我之所以说这些，是因为动画的效果已经在现在的互联网设计中得到了广泛的应用。这背后得益于硬件的升级及代码技术的不断发展。同时，补间动画这种形式又凭借着它便于数位化的优势，成为被应用最多的形式。后面，我会继续整理一些文章，包括：互联网设计中动画的应用原则、交互动画设计方法等。
转自：阿里妈妈MUX
){kind=link}
){kind=link}