使用变换，你可以改变变换的速率，在开始的时候较慢然后在结束的时候加速，反之亦然，或者之间的任何事情。CSS变换有5个计时的关键词，同时也允许你自己定义你自己的计时曲线。

名称	如何工作
cubic-bezier(x1, y1, x2, y2)	X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的形状。
linear	均速
ease	逐渐慢下来
ease-in	加速(渐入)
ease-out	减速(淡出)
ease-in-out	加速然后减速

全部变换？

变换将很快成为所有网站的标准操作方式，从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换，一个做法就是添加一个变换到全体选择器，类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换，从而允许你保持一个统一的变换效果：

*:link, *:visited, *:hover, *:active, *:focus {
   -webkit-transition:
     color .25s linear,
      background-color .25s linear,
     border-color .25s linear;
   transition:
     color .25s linear,
     background-color .25s linear,
     border-color .25s linear;
}

一个反对全部变换，同时明确反对使用全体选择器作为CSS reset的争论是，将一个样式用到页面的所有元素会减缓页面的渲染。然而，我并没有发现任何有关与此的证据。有人知道吗？

OK，其实CSS 变换就这么简单，它并不难理解，而且你也不用些大量的JS脚本来实现它，这很方便实用，多做几次练习，你就可以熟练的使用它了。

译注：本文原文题目为 CSS transitions 101，101这个数字比较不好理解，其实美国大学第一门课程通常编号为101，所以101一般表示入门、初级的意思。另外关于 transition 这个词的翻译，我之前是翻译成“转换”，但是这个翻译很别扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人讨论后，觉得翻译成“变换”更合适一些，多谢各位。——神飞

本文链接：http://www.blueidea.com/tech/web/2010/7373.asp　

出处：前端观察
责任编辑：bluehearts

上一页 CSS3变换入门 [4] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。