CSS3 过渡

在前端开发中，CSS3 过渡是一种让页面元素在属性变化时变得平滑、生动的动态效果。它能够让页面更加美观、交互性更强，增加用户体验，是现代 Web 设计中重要的一环。本文将详细介绍 CSS3 过渡的基本语法、属性及应用。

语法

transition 属性是 CSS3 过渡的核心语法，其基本用法如下：

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

其中，每个属性的含义如下：

• transition-property：指定需要过渡的属性；
• transition-duration：指定过渡的时间；
• transition-timing-function：指定过渡效果的速度曲线；
• transition-delay：指定开始过渡前的延迟时间。

同时也可以缩写语法，如下：

/* 等同于 transition: all 0.3s ease-out 0s; */
transition: .3s ease-out;

属性

transition-property

transition-property 属性指定需要过渡的 CSS 属性名。默认值为 all，即代表所有属性均需要过渡。

transition-duration

transition-duration 属性指定过渡效果的持续时间，以秒（s）或毫秒（ms）为单位。默认值为 0，也就是无效果。

/* 过渡效果持续 1s */
transition-duration: 1s;

/* 过渡效果持续 500ms */
transition-duration: 500ms;

transition-timing-function

transition-timing-function 属性指定过渡效果的速度曲线。缓动函数常见的有 linear、ease、ease-in、ease-out、ease-in-out 等。

/* 线性 */
transition-timing-function: linear;

/* 缓入缓出 */
transition-timing-function: ease;

/* 缓入 */
transition-timing-function: ease-in;

/* 缓出 */
transition-timing-function: ease-out;

/* 缓入缓出 */
transition-timing-function: ease-in-out;

也可以使用 cubic-bezier() 函数自定义速度曲线。

transition-delay

transition-delay 属性指定开始过渡前的延迟时间，以秒（s）或毫秒（ms）为单位。默认值为 0。

/* 延迟 1s 后开始过渡 */
transition-delay: 1s;

/* 延迟 500ms 后开始过渡 */
transition-delay: 500ms;

应用

下面给出一个简单的例子。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all .3s ease-out;
}

.box:hover {
  width: 150px;
  height: 150px;
  background-color: red;
}

在鼠标移上去时，盒子的宽度和高度会从 100px 过渡到 150px，背景色从蓝色过渡到红色，过程持续 0.3 秒，并且使用了缓出的速度曲线。

总结

CSS3 过渡可以为 Web 页面增添更生动、优美的动态效果，提高用户体验。了解过渡的基本语法和属性，可以在实际项目中有更多的运用。