CSS 3 Transition（变换）

如长度增加，能产生类似拉长的动画效果；颜色改变时，也可以利用Transition产生一种颜色渐变的效果。

浏览器支持情况

CSS Transition受到浏览器的广泛支持。

Chrome 2+(-webkit-transition) Firefox3.7+(-moz-transition) Safari 3.1+(-webkit-transition) Opera 10.5+(-o-transition)

From:axiu.me

不过经过我的观察，现在IE还是不能支持，即使是在IE9中。不过也没有关系，至少并不会出现什么令人感觉糟糕的结果。(来源：http://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html#)

CSS变换的由来

CSS Transition曾经是只属于Apple Safari Webkit的东西，仅能由Safari UI实现的动画效果。

可是W3C有部分工作人员认为变换动画是脚本该做的事情而不是CSS，不过去年三月份，来自Apple、Mozilla开始将CSS变换模块添加到CSS 3特性里面，非常接近原来Safari Webkit的效果。由此得来CSS Transition。

书写方法

在CSS代码中，要使用Transition属性需要这么书写：

-moz-transition: // Firefox -webkit-transition: // Safari、Chrome -o-transition: // Opera transition: //官方标准

建议在书写时，将上述全写上。

效果之：颜色变换

使用Transition可以实现颜色的变换，比如一个锚链接的鼠标移上产生颜色渐变动画：

链接

其核心代码如下：

a:hover { color: red; background-color: rgb(255,204,255); -webkit-transition: color .5s linear, background-color .5s linear; transition: color .5s linear, background-color .5s linear; }

效果之：拉伸、伸缩效果

• About Us

其核心代码如下：

#example2 { height:200px; } #example2 a:link { color: blue; text-decoration: none; -webkit-transition: color .25s ease-in 0s; transition: color .25s ease-out 0s; } #example2 a:hover { color: red; -webkit-transition: color .25s ease-in .1s; transition: color .25s ease-out .1s; } #example2 a:active { color: green; transition: color .25s ease; } #example2 ul { list-style: none; margin: 0; padding: 0; } #example2 .menu { display: block; position: relative; top: .9em; left: 0; padding: 10px; height: auto; width: 100px; border: 8px solid rgba(204,204,204,.5); cursor: pointer; background-color: rgba(255,255,255,.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #example2 ul.menu li { font-weight: normal; list-style: none; margin:0 } #example2 ul.menu li a:link { font-weight: normal; list-style: none; font-size: 12px; margin-left: 0; padding-left: 0; } #example2 ul.menu ul li { font-weight: normal; padding: 5px 0; margin:0; border-top: 1px solid rgb(204,204,204); background-color: rgb(255,255,255); -webkit-transition: background-color .5s ease; transition: background-color .2s ease; } #example2 .drop { display: block; position: relative; height: 0; overflow: hidden; width: 100px; opacity: 0; -webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s; transition: opacity .25s linear 0s, height .25s ease-out .1s; } #example2 ul.menu ul li:hover { background-color: rgb(234,234,234); -webkit-transition: background-color .5s ease; transition: background-color .2s ease; } #example2 ul.menu:hover .drop { height: 140px; opacity: 1; -webkit-transition: opacity .25s linear 0s, height .25s linear 0s; transition: opacity .25s linear 0s, height .25s linear 0s; }

效果之：位置移动

你可以试想，如果在发生位置之间的改变时，如果使用Transition属性，则可以做到过渡移动的动画效果，这非常像是脚本做出的事情。

位置移动

按住鼠标不放

其核心代码如下：

#example3 { background-color: black; color: white; } #example3 .control { text-align: center; font-size: 3em; } #example3 .move { cursor: pointer;} #example3 .move>#astro { position: relative; top: 0; left: 250px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s ease-in-out, left 2s ease; } #example3 .move:active>#astro { top: 10px; left: 10px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s ease-in-out, left 2s ease; }

补充

同时添加多种变换

如果你希望你的元素的颜色、背景都发生渐变，例如：

a:hover { color: red; background-color: pink; -webkit-transition: color .25s linear; transition: color .25s linear; -webkit-transition: background-color .15s linear .1; transition: background-color .15s linear .1; }

这并不能达到目的，后面的将会覆盖掉前面的，因此方法是使用逗号同时使用多种变换效果：

a:hover { color: red; background-color: pink; -webkit-transition: color .25s linear, background-color .15s linear .1s; transition: color .25s linear, background-color .15s linear .1s; }

变换计时与延迟

如果你希望自定义你的变换效果，比如你希望自定义动画改变的速率，CSS提供了如下关键字可以添加在位尾后：

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

附录：可以发生变换的属性

那些属性可以变换呢？几乎除了box-shadow以外，其他的都可以发生变换。

CSS属性	改变的对象
background-color	色彩
background-image	只是渐变
background-position	百分比，长度
border-bottom-color	色彩
border-bottom-width	长度
border-color	色彩
border-left-color	色彩
border-left-width	长度
border-right-color	色彩
border-right-width	长度
border-spacing	长度
border-top-color	色彩
border-top-width	长度
border-width	长度
bottom	百分比，长度
color	色彩
crop	百分比
font-size	百分比，长度
font-weight	数字
grid-*	数量
height	百分比，长度
left	百分比，长度
letter-spacing	长度
line-height	百分比，长度，数字
margin-bottom	长度
margin-left	长度
margin-right	长度
margin-top	长度
max-height	百分比，长度
max-width	百分比，长度
min-height	百分比，长度
min-width	百分比，长度
opacity	数字
outline-color	色彩
outline-offset	整数
outline-width	长度
padding-bottom	长度
padding-left	长度
padding-right	长度
padding-top	长度
right	百分比，长度
text-indent	百分比，长度
text-shadow	阴影
top	百分比，长度
vertical-align	百分比，长度，关键词
visibility	可见性
width	百分比，长度
word-spacing	百分比，长度
z-index	正整数
zoom	数字

谢谢收看。