transition(转换)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

 #nav a{ background-color:red; }
 #nav a:hover, #nav a:focus{
  background-color:blue;
  /* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗？ #foreshadowing)*/
  -webkit-transition-property:background-color;
  /* 让它持续两秒钟*/
  -webkit-transition-duration:2s;
}

转换的一些参数

• transition-property
  指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。
• transition-duration
  定义转换花费的时间（从旧属性换到新属性花费的时间）
• transition-timing-function
  可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out
• transition-delay
  这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

注：参数部分为翻译时添加，原文中没有。

浏览器支持

像transform属性一样酷，但是目前只有WebKit浏览器支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

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

上一页 你需要知道的CSS3动画技术 [4] 下一页 你需要知道的CSS3动画技术 [6]

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