css3里的transition属性可以控制页面元素的过渡效果，格式如下：
transition: transition-property transition-duration transition-timing-function transition-delay ;
transition-property:css属性，比如color width background等,跟jquery的动画只能设置数值类型属性不同
transition-duration：过渡效果持续时长，比如1s 0.5s,在css里面0可以省略，简写为.5s
transition-timing-function:过渡使用的函数，有先快后慢等等之分，区别不大，常见的函数有linear ease ease-in ease-out ease-in-out
transition-delay:过渡开始延时时长 比如 1s .5s
注意：一般配合伪类:hover使用
来看一个例子，最终效果如图：
下面是实现这个效果的代码，html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>transaction</title> </head> <body> <div></div> <section> <p><a href="#">超链接</a></p> <p><a href="#">超链接</a></p> <p><a href="#">超链接</a></p> </section> </body> </html>
css代码：
<style>
div{
width:100px;
height:100px;
background:blue;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
transition:width 2s;
}
div:hover{
width:300px;
}
section a{
transition:padding 2s,color 1s ease-in 1s;
transition-property:background 2s;
transition-duration:.5s;
}
section a:hover{
padding-left:20px;
color:red;
background:green;
}
</style>
代码解释：
transition:width 2s，表示width的变化需要2s来完成，那么width怎么变化？width从什么时候开始触发这个变化？
看第一个问题： width怎么变化？
width从100px变为300px。因为当div被鼠标hover的时候定义了width变为300px。
第二个问题：width从什么时候开始触发这个变化？
css里面写着呢，当hover的时候发生变化。
总结：
css属性的过渡快慢、是否均匀过渡等都是由transition来控制的。但是transition和animation动画不同。animation通过@keyframe可以精准地控制当前帧的属性值，而transition不能指定每帧的属性值，所以相对而言animation的功能更加灵活。另外,animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化，而transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化。
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
