我们使用了一个新的DIV元素来表示阴影，这样我们就可以在动画中分别控制阴影和小球。 为了制造这种球即将下落的悬念，我们故意在动画开始时增加一点延时，让小球不是立即掉下来。 只要稍稍调整一下我们动画设置的百分比的位置即可：

@-webkit-keyframes example { 0% { -webkit-transform: translateY(-300px) scaleY(1.2); } 35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* 和开始时同样的位置，即让球等待一会儿再下落 0% */ 65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* 当动画播放到65%时，球再开始下落 */ 67% { -webkit-transform: translateY(10px) scaleY(0.8); } 85% { -webkit-transform: translateY(-100px) scaleY(1.2); } 100% { -webkit-transform: translateY(0px); } }

在动画35%的关键帧设置中，球的位置没有变化，而到65%时，球才完全落地。 除了使用这种方法，你还可以用 animate-delay属性来设置动画延迟以达到增加悬念的效果

div { -webkit-animation-delay: 1s; }
舞台布局（Staging）迪士尼动画电影里绚丽多彩的背景是表现人物的重要手段！因此我们也需要为我们的动画创造一个舞台。

舞台同时也是帮助动画观众集中注意力的方法，就像在一个剧院中舞台上的聚光灯，会牵引观众的视线。 在我们的小球动画中，我已经加入了一个简单的背景，这个背景使得观众能够知道动画即将发生在页面的中央。

顺序动画和关键帧填充（Straight-Ahead vs. Pose to Pose）

传统动画中，有两种构建动画的手段。第一种是顺序动画，即从动画的第一帧开始绘制按照时间顺序一帧一帧的完成整个动画。第二种方法称为"Pose to Pose", 直译为从姿势到姿势。即先描绘出动画过程中若干关键帧的内容，然后再去填充关键帧之间的部分从而逐步完成整个动画。 填充关键帧之间内容的过程称为”in-betweening,” or “tweening,” 如果你制作过Flash动画，应该对这些术语不会陌生。

对CSS动画而言，我们一般使用关键帧填充的方式来完成动画。我们先描述动画过程中的关键帧，而后浏览器会自动帮我们完成填充。 不过，有时候我们也需要借助顺序动画的方法来达到精细控制动画效果的目的，浏览器能够自动实现的效果总是有限的。

动作跟随和重叠（Follow-Through and Overlapping）动作跟随的本质是物理学，要让动画逼真就得让其中的物体和人物的行为符合物理定律。动作跟随和动作重叠常常会用在人物动画中，尤其是肢体的运动，例如当人物把手臂或长发放下时，手臂或头发会在放下后继续前后摇摆一阵。再设想一下一个有啤酒肚的人物（比如史莱克）快速转身时的情形： 他的身体会先转过来，而他突出的肚子则会比身体转动的要慢一些。


对我们的例子而言，就是要让球下落时更符合物理定律。而我们之前展示的动画的小球下落时还不够自然。我们希望看到球可以自由落体式的下落然后再弹起来。 不过，且让我们继续看下一条军规。

慢进慢出 （Slow  in and Slow Out）这条规则讲得是物体的运动都是渐变的，加速和减速都需要过程。设想一辆高速行驶的汽车需要停下，如果画面中的汽车突然停下，那肯定让观众觉得不真实。大家都知道汽车停下来会经过减速的过程。因此要做到逼真，就必须模拟汽车先刹车减速，并最终慢慢停下的过程。

这条规则和重力的效果也有关系。设想一个正在荡秋千的小孩子。当他从低荡到最高点时，他在逐渐减速，由高处再荡回来的过程又是逐渐加速的过程，他的将在秋千的最低点达到最快的速度。 然后他再此经历减速过程荡向反方向的高点。

把这一准则应用到我们的例子中，通过调整小球进入画面和弹出画面的速度，我们可以让观众感到更加逼真的效果：当小球落到地面，并反弹起来的过程中，反弹的越接近高点它的速度就越慢。

在css中我们可以使用animation-timing-function 属性来配置动画随时间变化的速率：

-webkit-animation-timing-function: ease-out;
这一属性有４个可选值：

ease-in ：开始时慢，并逐渐加速
ease-out： 开始时快，并逐渐减速停下
ease-in-out： 开始慢并加速，到中间时最快，然后又逐渐减速并停下
linear　：匀速播放

你还可以使用bezier-curve 函数来创建自己的速率函数（easing speed）

查看示例

弧形运行(Arc)

和跟随准则一样，弧度准则也是基于对基本物理定律的观察：”弹起来的物体最终总会落下“， 考虑物体运行轨迹时，恰当运用弧线。

设想我们把小球从画面的左侧掷向舞台。　逼真的动画应该能够模拟出它沿着弧线（抛物线）落下，并弹起，再次沿弧线落下的过程。


使用CSS制作这样一个动画需要一些更加精细的控制。我们需要同时控制小球在纵向和横向两个方向上的运行。　因此我们实际上需要让小球一面平滑的自左向右运动，再结合上之前我们已经制作出的自由下落的动画。与其用一个复杂的动画来描述这两个方向的运动，我们可以直接使用２个动画来实现，更加简单。为了达到这一目的，我们需要在我们的小球之外再添加一个div并为它单独配置动画效果（横向运动）

HTML 代码：

<div class="ball-arc"> <div class="ball"></div> </div>

CSS代码：

.ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1); } /* cubic-bezier 函数的使用是用来调节动画运行的速度，这里我们使球慢慢减速*/ @-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px); } 100% { -webkit-transform: translateX(0px); } }
上述代码可以看到，我们新加了一个动画ball-x 它作用在外层div上，负责小球的横向运动，而ball-y则作用在内层div上负责纵向运动。

当然，这样将动作拆分为横向和纵向的写法有它的缺点，当你真的要创作一些非常复杂的动画时，这些代码在语义上比较难以理解。
查看示例


下篇已经发表： CSS 动画指南： 原理和实战（二）