CSS 动画指南： 原理和实战（二）

简介：无论动画以何种技术载体呈现，无论是传统的手绘动画，还是电脑生成的3D动画，也无论是用Flash还是CSS， 动画的基本原理和设计准则都未曾变过的。 在这篇文章中，我们会先解释CSS动画的基本概念，并且介绍使用CSS创建动画的要点。我们以一个例子贯穿始终，利用传统动画的准则来逐步构建这个动画。

接上篇

CSS 动画指南： 原理和实战 （一）

作者： Tom Waterhouse

原文连接：http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/#more-105335

译者： feijia ([e-mail])

(译者注：本文章中的示例页面需要，并推荐使用最新的FF，Chrome等查看）

次要动作（Secondary Action）

要使动画逼真必须关注细节，除了描绘动画角色的主要动作外，需要通过对次要动作的描绘进一步增加动画的真实感。正如谚语所说“恶魔藏在细节里” 。例如，如果要刻画一个长发飘飘的姑娘在走路时，人物行走是主要动作，而次要动作则是她那跟随步伐摇摆弹跳的长发，又或是她随风摆动的裙角。 通过描绘这些细节（次要动作），能够让观众进一步感到动画的逼真。

当然在我们的小球动画中，要比这简单多了。要给小球的下落增加一些细节，我们可以选择让小球在运动中旋转。那会创造一种小球被人投掷到舞台上的感觉。

这次我们不用额外添加一个div来实现这一效果，我们可以把这个旋转的动画直接应用到用来显示小球纹理的img元素上

.ball img {
-webkit-animation: spin 2.5s;
}

@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(-180deg); }
   100% { -webkit-transform: rotate(360deg); }
}

作者： Tom Waterhouse 译者： feijia ([e-mail])

查看示例

恰当的节奏（Timing ）

这一点很好理解，动画中的物体的运动的速度，节奏，直接关系到他们看起来是不是逼真。 我们的小球动画就是一个生动的例子。 我们目前设定的小球运动的节奏使它看起来比较符合一个质量很轻的网球被抛掷的速度，试想如果我们是在掷一个沉重的保龄球，那么球下落的一定会比较快。 （译者：作者原话，纠结于“两个铁球同时落地“的同学，我想他的意思是，如果是一个弹性很小的保龄球，它落地后再反弹的高度会短很多）同样，如果我们让动画再慢一些，那同样会让它看起来不真实，好似是在太空中打网球了。

通过调整animation-duration属性，你可以调整动画运行的整体时间从而调整动画运动的节奏，同样你也可以通过设置百分比的方法来进行微调。

夸张（Exaggeration）

虽然前面我们说了种种通过模拟物理规律来让动画逼真的方法，但是卡通形象当然也不必处处遵循物理规律，恰到好处的夸张可以增加效果。 比如卡通形象可以变形成任何形状，并最后再变回来。夸张的效果可以使一个动作看起来不那么平淡，也可以起到强调的作用。

掌握何时使用夸张的火候很有技巧，迪斯尼动画有一条规则说：在动画中大部分时候尽量模拟真实的基础上再并稍稍使它超出一点。好像一个动画人物跑向一堵墙，他的身体会被挤压到墙上（当然现实世界不会发生这样的情形），这种挤压就是那部分微微夸张的效果。

我们使用了夸张这一技巧（挤压和拉伸）来强调球在落地时的效果。我还额外添加了一个微小的颤动效果。最后，我们还加入了球在弹起后加入了拉伸效果来表达它的速度感。

向前几次一样，为了加入颤动，我又加了一个新的div，它将会随着球落地而抖动。示例代码如下：

@-webkit-keyframes wobble {

0%, 24%, 54%, 74%, 86%, 96%, 100% {
   -webkit-transform: scaleX(1.0);
/* 在这些位置，球将会回到正常形状 */
}

25%, 55%, 75% {
   -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px);
/* 球落地的位置：压缩效果（宽度增加，高度变小） */
}

30%, 60%, 80% {
   -webkit-transform: scaleX(0.8) scaleY(1.2);
/* 球落地后的几个收缩的点 */
}

75%, 87% {
   -webkit-transform: scaleX(1.2);
/* Subtler squash for the last few bounces */
}

97% -webkit-transform: scaleX(1.1);
/* Even subtler squash for last bounce */
}

}

代码看起来有些复杂，不过不用担心，通过不断调整直到你觉得达到了你设想的效果。　
作者： Tom Waterhouse 译者： feijia ([e-mail])
查看示例

扎实的绘画和人物的魅力（Solid Drawing and Appeal）

我能教你的就这么多了，至少没有更多的示例代码了。最后两条准则没办法CSS代码演示。　可它们是你必须掌握的使动画臻于完美的技巧。　

当迪斯尼在制作白雪公主动画时，它把动画师们派回重新去上绘画课，重新理解人类的动作。这种对细节的关注直接提现在它的作品中，优秀的动画必须有扎实的绘画功底，以及对你所描绘事物的细致理解（也许是一个网球，也许是一个人物）

虽然大多数ＣＳＳ动画可能不会像一个人物动画那么复杂，不过这一原则仍然有效。无论是模拟一扇打开的门，还是制作一个用于”联系我们“图表的打开信封的小动画，都应当尽量逼真。

每个人物的魅力（Ａｐｐｅａｌ）　都是独一无二的。迪斯尼的成功经验告诉我们，任何事物都可以有自己的性格：哪怕是一个茶壶，一棵树，或是一把调羹。使用ＣＳＳ的创造网页动画，我们也应该考虑这一动画如何帮助提升页面整体设计和体验的作用

开始行动吧！

作者： Tom Waterhouse 译者： feijia ([e-mail])
动画是项了不起的CSS3新特性。就像其他CSS的新功能，人们很有可能会误用甚至滥用它，我们也许会重新看到过去那种Flash風格的花哨頁面。不过我相信今天的Web开发者们应该不会重蹈覆辙。

CSS动画可以让网站生动起来，我们的弹跳的网球球的示例代码也许不是最好的例子，但是它演示了要在页面中加入一个逼真的CSS动画的必要步骤。

有了CSS动画，你可以给你的页面元素加入许多互动性（而且是在不用Flash前提下！），配合JavaScript，它甚至可以用来制作网页游戏。 通过应用本文所介绍的12条准则，你可以为你的网站制作出更加逼真可信的动画，从而提升网站的整体用户体验。
作者： Tom Waterhouse 译者： feijia ([e-mail])

CSS动画工具

作者： Tom Waterhouse 译者： feijia ([e-mail])
许多工具可以帮助你制作CSS动画。

Sencha Animator

Adobe Edge

Tumult(mac only)

真实的CSS动画案例

看看真实应用中的CSS动画会让你对它所能实现的效果有更深的影响。

CSS Spider-man animation by Anthony Calzadilla

CSS Tricks (animated typography person),by Mircea Piturca

Walking man,by Andrew Hoyer

Learning CSS3: Useful References and Guidelines, on Smashing Magazine
Mastering CSS Principles: A Comprehensive Guide, on Smashing Magazine
作者： Tom Waterhouse 译者： feijia ([e-mail])

========================================

作者： Tom Waterhouse 译者： feijia ([e-mail])

译者补充， 下面的代码可以检查用户浏览器是否支持CSS 动画

var animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '';

if( elm.style.animationName ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}