div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
属性定义及使用说明
transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。
这个属性包含四个值：
- transition-property: 指定要过渡的 CSS 属性的名称。例如，
color、background-color等。 - transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
- transition-timing-function: 指定过渡效果的速度曲线。它可以是
linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。 - transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。
实例
/* 对所有属性都应用过渡效果 */
.element {
transition: all 0.3s ease;
}
/* 对指定属性（颜色）应用过渡效果 */
.element {
transition: color 0.3s ease-in-out;
}