CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

一、它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

div { transition: width 2s;

-webkit-transition: width 2s; /* Safari */ }

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover
{
width:300px;
}

注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

属性定义及使用说明

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;
}

过渡属性

下表列出了所有的过渡属性:

div { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }