css3 transtion属性的使用

**CSS3 Transition 属性的使用**

CSS3 提供了一个强大的功能——Transition（过渡效果），可以让元素在状态变化时产生动画效果。这种效果可以使页面更加吸引人，提高用户体验。

###什么是Transition？

Transition 是 CSS3 中的一个属性，它允许我们定义元素在状态变化时的过渡效果。例如，当鼠标悬停在一个元素上时，可以让该元素从一种颜色变成另一种颜色，这样可以使页面更加吸引人。

### Transition 的基本使用要使用 Transition，我们需要在 CSS 中定义它。下面是一个简单的例子：

css.box {
 width:100px;
 height:100px;
 background-color: #f00;
 transition: all2s ease-in-out; /* 这里是Transition的基本使用 */
}

.box:hover {
 background-color: #0f0;
}

在这个例子中，我们定义了一个 `.box` 元素，它有一个宽度和高度为100px 的盒子，背景颜色为红色。然后我们定义了 Transition 属性，所有的属性都可以过渡（all），过渡时间为2 秒（2s），效果方式为 ease-in-out。

当鼠标悬停在 `.box` 元素上时，它会从红色变成绿色，这样就产生了一个动画效果。

### Transition 的属性Transition 属性有以下几个子属性：

* `transition-property`:定义哪些属性可以过渡。
* `transition-duration`:定义过渡的时间。
* `transition-timing-function`:定义过渡的方式。
* `transition-delay`:定义过渡的延迟时间。

### Transition 的例子下面是一个更复杂的例子：

css.box {
 width:100px;
 height:100px;
 background-color: #f00;
 border-radius:50%;
 transition-property: all, border-radius; /* 这里是Transition的属性 */
 transition-duration:2s,1s; /* 这里是Transition的时间 */
 transition-timing-function: ease-in-out, linear; /* 这里是Transition的方式 */
 transition-delay:0.5s,1s; /* 这里是Transition的延迟时间 */
}

.box:hover {
 background-color: #0f0;
 border-radius:50%;
}

在这个例子中，我们定义了一个 `.box` 元素，它有一个宽度和高度为100px 的盒子，背景颜色为红色，圆角为50%。然后我们定义了 Transition 属性，所有的属性都可以过渡（all），过渡时间为2 秒（2s），效果方式为 ease-in-out。

当鼠标悬停在 `.box` 元素上时，它会从红色变成绿色，并且圆角也会变化，这样就产生了一个动画效果。

### Transition 的应用Transition 属性可以在很多地方使用，例如：

* 当鼠标悬停在元素上时，可以让元素产生过渡效果。
* 当元素的状态发生变化时，可以让元素产生过渡效果。
* 可以用来制作动画效果。

下面是一个更复杂的例子：

css.box {
 width:100px;
 height:100px;
 background-color: #f00;
 border-radius:50%;
 transition-property: all, border-radius; /* 这里是Transition的属性 */
 transition-duration:2s,1s; /* 这里是Transition的时间 */
 transition-timing-function: ease-in-out, linear; /* 这里是Transition的方式 */
 transition-delay:0.5s,1s; /* 这里是Transition的延迟时间 */
}

.box:hover {
 background-color: #0f0;
 border-radius:50%;
}

.box:active {
 transform: scale(2);
}

在这个例子中，我们定义了一个 `.box` 元素，它有一个宽度和高度为100px 的盒子，背景颜色为红色，圆角为50%。然后我们定义了 Transition 属性，所有的属性都可以过渡（all），过渡时间为2 秒（2s），效果方式为 ease-in-out。

当鼠标悬停在 `.box` 元素上时，它会从红色变成绿色，并且圆角也会变化，这样就产生了一个动画效果。

当鼠标点击在 `.box` 元素上时，它会被放大两倍，这样就产生了一个动画效果。

### 总结Transition 属性是 CSS3 中的一个强大的功能，可以让元素在状态变化时产生动画效果。这种效果可以使页面更加吸引人，提高用户体验。

Transition 属性有以下几个子属性：

* `transition-property`:定义哪些属性可以过渡。
* `transition-duration`:定义过渡的时间。
* `transition-timing-function`:定义过渡的方式。
* `transition-delay`:定义过渡的延迟时间。

Transition 属性可以在很多地方使用，例如：

* 当鼠标悬停在元素上时，可以让元素产生过渡效果。
* 当元素的状态发生变化时，可以让元素产生过渡效果。
* 可以用来制作动画效果。