1、transition过渡效果
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。
CSS3 提供了 transition 属性来实现这个过渡功能。
实例
将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：
div {
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {
width:300px;
}浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性定义及使用说明
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property
transition-duration
transition-timing-function
transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
语法
transition: property duration timing-function delay;
笔者后记：对于css3新增的过渡内容和css新增动画效果的内容大家也可以查查CSS3最新版参考手册。不用死记硬背，即便当时忘了，直接到手册里查其实也一样，你不可能每次要用的时候都忘，转过头反复的去查。大家都一样方式过来的，用久了各种CSS属性标签都是熟能生巧的。
