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

最新推荐文章于 2024-05-23 22:54:35 发布

hellochenlu

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量504

点赞数

本文介绍了CSS动画的基本原理和设计准则，通过实例讲解如何使用CSS3的transform和translate属性创建逼真的动画效果。

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

作者： Tom Waterhouse

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

译者： feijia (tiimfei@gmail.com)

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

下篇已经发表：

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

Firefox和Webkit系列的浏览器都已经支持CSS 动画，是时候动手学习这个新的技术了。不管动画以何种技术载体呈现，无论是传统的手绘动画，还是电脑生成的3D动画，也无论是使用Flash技术还是CSS3，制作动画的基本原理和设计准则都未曾改变。在这篇文章中，我们会先解释CSS动画的基本概念，并且介绍使用CSS创建动画的要点。我们将以一个网球下落的例子贯穿始终，利用传统动画的准则来逐步构建这个CSS动画。最后我们会看一些真实世界里的CSS动画用法。

CSS 动画属性

在开始前，我们需要了解CSS 动画的基础知识。动画是一种新的CSS 特性，它可以在不借助JavaScript和Flash的情况下使绝大多数HTML元素动起来（例如div，h1，或者Span等等）。现在它已经被Webkit家族的浏览器（包括Safari 4+， Safari for iOS(iOS2+),Chrome1+ ）以及Firefox 5 所支持。不支持这些属性的浏览器则会直接忽略它们，所以使用它们时最好确定你的页面不会完全依赖这些动画属性（译者：或者你可以使用一些代码来检查用户的浏览器是否支持css动画特性 https://developer.mozilla.org/en/CSS/CSS_animations/Detecting_CSS_animation_support）

目前这一属性还比较新，所以各家浏览器厂商在自己支持的属性前都加上了前缀如-moz- （firefox）, -webkit- （Safari 和Chrome）在本文的示例代码中为简洁起见，我们只使用-webkit- 前缀。

CSS动画的声明就是将一段描述动画的样式附加到目标元素上，

/* 这是一段动画代码*/  
@-webkit-keyframes example {  
   from { transform: scale(2.0); }  
   to   { transform: scale(1.0); }  
}  
  
/* 这是动画即将应用的目标元素 */  
div {  
   -webkit-animation-name: example;  
   -webkit-animation-duration: 1s;  
   -webkit-animation-timing-function: ease; /* ease is the default */  
   -webkit-animation-delay: 1s;             /* 0 is the default */  
   -webkit-animation-iteration-count: 2;    /* 1 is the default */  
   -webkit-animation-direction: alternate;  /* normal is the default */  
}

这段代码中，第一部分是描述动画的样式，名字叫“example"，它可以出现在样式表中的任何位置，或前或后。在描述元素的类中可以使用animation-name 属性来指定要使用哪个动画效果。

跟其他的样式写法类似的，上面例子中的几个动画属性都可以简写成如下格式：

div {  
-webkit-animation: example 1s ease 1s 2 alternate;  
}

甚至你也可以把所有的值都省略掉，这时浏览器会直接使用默认值。好了，这些就是基本概念了，应该挺简单的吧？

传统动画的基本准则

迪士尼 - 传动动画的鼻祖和大师- 很早就提出了制作动画的12条准则，并出版了著作：The Illusion of life 来阐述这些准则。这些基本的准则可以应用到所有的动画中去，实际上你不需要是个动画专家也可以学着遵循这些准则。我们会试着遵循这12条“动画军规”，并使用CSS来实现更逼真可信的动画效果。

挤压与拉伸（Squash and Stretch)

如果物体在运动过程中它本身的形体不发生任何变化，那会显得的非常僵硬。上图演示是一个夸张的弹跳的网球的草图。当网球从高处落下并撞击地面时，你会看到球被压扁了，而后它再次离地弹起时，又被拉长了。

球被压扁和拉伸的过程能够让人感觉到网球的弹性，想象一下如果是一个又重又硬的保龄球掉落下来，肯定不会有这样的效果，那肯定要把地板砸出个窟窿。
实现上面草图中网球球落地压扁再拉伸的效果，我们只要应用CSS3中的transform属性就能实现：

@-webkit-keyframes example {  
   0% { -webkit-transform: scaleY(1.0); }  
   50% { -webkit-transform: scaleY(1.2); }  
   100% { -webkit-transform: scaleY(1.0); }  
}

上述代码会在动画的不同阶段把页面对象按照纵向（ｙ轴）　拉伸1.2倍再变回原样。

这段代码中我们使用了百分比的方式来指定了变形在动画过程中发生具体时间（也叫关键帧）。对于简单的动画，你可以直接使用from和to来指定开始和结束的动画状态。使用百分比，则可以更加精细的控制动画播放的关键过程。

接下来我们可以使用translate 属性来让物体动起来。我们可以把transform和translate合并使用：

50% {  
-webkit-transform: translateY(-300px) scaleY(1.2);  
}

使用translate属性可以在不改变对象其他属性（例如位置，高度或宽度）的前提下操纵对象的位置，因此该属性常用于CSS动画制作。上述例子代码，指定了球在动画播放中点（50%）处的样子，使它看起来像是正在反弹离开地面。

注意：要看到我们的例子运行时的效果，你需要使用最新的FF，Chrome或Safari，在本文写作时，Safari提供了最好的动画体验）
查看示例

好吧，我得承认到目前为止，这个动画还是挺垃圾的。但是我们已经向“逼真”这个目标迈进了第一步！