CSS3 的过渡（transition）属性是实现动态效果的重要工具，可以让元素在状态变化时平滑地过渡，而不需要使用 JavaScript。通过设置过渡，我们能够让元素的样式在一定时间内渐变，通常用于按钮点击、hover 效果、显示/隐藏元素等场景。

一、基本概念

过渡（Transition）允许你定义元素在某些属性发生变化时，平滑过渡到新的状态。通过过渡属性，你可以控制动画的时间、延迟、变化的属性、过渡的速度曲线等。

二、transition 属性简要介绍

transition 属性包括以下几个部分：

  1. transition-property：定义哪些 CSS 属性会发生过渡。
  2. transition-duration：定义过渡动画的持续时间。
  3. transition-timing-function：定义过渡动画的速度曲线，控制动画的加速或减速。
  4. transition-delay：定义过渡动画开始的延迟时间。

这些属性可以单独设置，也可以通过简写方式设置。

三、常见的 transition 属性及示例

1. 简单的过渡动画

通过 CSS 设置一个简单的过渡效果：当鼠标悬停时，元素的颜色和大小发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 过渡效果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>


/* 1. 页面背景和布局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

/* 2. 方块元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: all 0.5s ease; /* 所有属性变化时的过渡动画 */
}

/* 3. 鼠标悬停时 */
.box:hover {
  background-color: #28a745;
  transform: scale(1.2); /* 放大 1.2 倍 */
}

解释：

  • transition: all 0.5s ease：设置所有可过渡的属性（background-color、transform）在 0.5 秒内平滑过渡，使用 ease 加速曲线。
  • :hover：当鼠标悬停在 .box 元素上时，背景颜色变为绿色，并且元素放大 1.2 倍。

2. 过渡多个属性

如果你只想过渡特定的属性（如 background-color 和 transform），可以单独指定过渡的属性。

/* 2. 方块元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition-property: background-color, transform; /* 只过渡这两个属性 */
  transition-duration: 0.5s; /* 设置过渡时长 */
  transition-timing-function: ease-in-out; /* 设置速度曲线 */
}

/* 3. 鼠标悬停时 */
.box:hover {
  background-color: #28a745;
  transform: scale(1.2); /* 放大 1.2 倍 */
}

3. 设置延迟时间

使用 transition-delay 属性，定义动画开始的延迟时间。

/* 2. 方块元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: all 0.5s ease 1s; /* 1秒后开始动画 */
}

/* 3. 鼠标悬停时 */
.box:hover {
  background-color: #28a745;
  transform: scale(1.2); /* 放大 1.2 倍 */
}

4. 动态更改过渡效果

你可以通过 transition 属性在不同的状态下灵活调整动画效果。

/* 2. 方块元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: width 0.5s ease, height 0.5s ease, background-color 1s ease-out;
}

/* 3. 鼠标悬停时 */
.box:hover {
  width: 200px;
  height: 200px;
  background-color: #28a745;
}
  • 在上面的代码中，我们为不同的属性设置了不同的过渡时长，width 和 height 会在 0.5 秒内过渡，而 background-color 会在 1 秒内过渡，使用 ease-out 加速曲线。

5. transition-timing-function 属性

transition-timing-function 控制动画的速度曲线，可以使动画加速、减速或保持匀速。

  • linear：匀速动画。
  • ease：先慢后快再慢。
  • ease-in：先慢后快。
  • ease-out：先快后慢。
  • ease-in-out：先慢后快再慢。
  • cubic-bezier(n,n,n,n)：自定义速度曲线。
/* 2. 方块元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1); /* 自定义速度曲线 */
}

/* 3. 鼠标悬停时 */
.box:hover {
  background-color: #28a745;
  transform: scale(1.2); /* 放大 1.2 倍 */
}

四、transition 实际应用示例

1. 鼠标悬停按钮的过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮过渡效果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="btn">Hover me!</button>
</body>
</html>


/* 1. 页面布局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

/* 2. 按钮样式 */
.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease; /* 设置过渡 */
}

/* 3. 鼠标悬停时 */
.btn:hover {
  background-color: #28a745;
  transform: scale(1.1); /* 放大 1.1 倍 */
}

2. 实现图片平滑过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片过渡效果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="https://via.placeholder.com/300" alt="Placeholder Image" class="image">
</body>
</html>


/* 1. 页面背景和布局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

/* 2. 图片样式 */
.image {
  width: 300px;
  height: 200px;
  transition: transform 0.3s ease, filter 0.3s ease; /* 图片过渡 */
}

/* 3. 鼠标悬停时 */
.image:hover {
  transform: scale(1.1); /* 放大 1.1 倍 */
  filter: brightness(1.2); /* 增加亮度 */
}

五、总结

通过 transition 属性，CSS3 可以轻松实现元素的平滑过渡效果，提升用户体验。你可以通过调整 transition的时长、延迟、速度曲线等属性，创造出各种不同的动态效果。

  • transition-property：指定哪些属性会发生过渡。
  • transition-duration：设置动画的持续时间。
  • `transition-timing