尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。比如一个链接要么是这个颜色，要 么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。这导 致大部分网页有些生硬，因为元素只会很死板的切换或改变。你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本 应该非常简单的功能。
我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。你会发现使用CSS变换(transition)是最快捷的方式。
CSS3变换已经被添加为webkit的扩展了，只能应用于基于webkit内核的浏览器（Safari，Chrome），也就是说在 IE，Firefox，Opera下都不支持（经本人测试，CSS3在IE9,Firefox4,Opera11下都没效果），所以，想要测试的同学请安 装Chrome或者Safari浏览器吧。CSS变换将不会替代所有的DHTML，不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。
首先，来认识一下CSS3变换（transition）属性，因为变换属性始于webkit扩展，我们不得不同时使用transition和-webkit-transition属性以向后兼容，该属性可以采用下面的4个值：

（1）CSS property：被变换的属性（比如：color）。
（2）Duration：变换持续的时候，通常以秒来计算(比如：1s)。
（3）Timing function：允许你控制持续的时间的计算方式（比如：linear(均速)）。蓝狮官网CSS变换有5个计时的关键词，同是也允许你自己定义你自己的的计时 曲线：cubic-bezier(x1,y1,x2,y2)(x和y值在0到1之间，以定义用于time function的贝塞尔曲线的开关)；linear()均速；ease(逐渐慢下来)；ease-in(在渐入时加速)；ease-out(在淡出时减 速)；ease-in-out(加速然后减速)。
（4）Delay：在动作和变换开始之间等待多久，通常用秒来计算。如果不想延迟，该值可省略。
几乎所有的有色彩、大小和位置等组件的CSS属性，包括许多新添加的CSS3属性，都可以应用变换，一个值得注意的例外是box-shadow。根据W3C的变换说明，下面列出了可以变换的CSS属性：

下面以鼠标经过一个div变大，鼠标离开div变回原来的大小的一个例子来演示一下令前端开发者沸腾的CSS变换效果：

在上例中，鼠标放到那个div上，宽，高，背景颜色，蓝狮注册登陆边框颜色都以均速的方式变换，鼠标离开又慢慢变回原样（注：因为一个变换就是一个CSS属性，如果你 在同一个CSS规则中添加多个变换的实例，那么最后的那个将会覆盖前面的，而不是添加它们。当然，这并不是说，不能添加多重变换——多重变换可以在同一个 变换属性定义中用逗号隔开。）
以前用JS或JS框架实现的一些动画效果可以用transition可实现，是不是爽到家了啊！增加了用户界面体验，快快接受CSS3吧！

标签：css3, transition