transition CSS

过渡（transition）是CSS3中的一个特性，它可以在元素从一种样式变换为另一种样式时添加动画效果[^1]。通过使用过渡，我们可以实现在不使用Flash动画或JavaScript的情况下，为元素的属性变化添加平滑的过渡效果。

在CSS中，我们可以使用`transition`属性来定义过渡效果的属性、持续时间、运动曲线和延迟时间。下面是一个示例，展示了如何使用过渡属性来实现鼠标悬停时改变元素宽度和高度的效果：

div {
  width: 200px;
  height: 100px;
  background-color: pink;
  transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}

div:hover {
  width: 600px;
  height: 300px;
}

在上面的示例中，当鼠标悬停在`div`元素上时，宽度会从200px过渡到600px，高度会从100px过渡到300px。过渡效果的持续时间分别为0.6秒和0.3秒，运动曲线分别为`ease`和`ease-in`，延迟时间分别为0秒和1秒。

相关问题

transition css

Transition CSS 是一种 CSS3 功能，用于在元素从一种状态转换到另一种状态时添加动画效果。它可以用来为元素的属性（如背景色、位置、大小等）添加过渡效果，让页面变得更加生动有趣。

使用 Transition CSS，需要设置以下属性：

- transition-property：需要添加过渡效果的 CSS 属性名称。
- transition-duration：过渡效果的持续时间。
- transition-timing-function：过渡效果的时间函数，用于控制过渡效果的速度变化。
- transition-delay：过渡效果启动前的延迟时间。

例如，以下代码将会为按钮添加一个背景颜色过渡效果：

button {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 1s;
}

button:hover {
  background-color: red;
}

当鼠标悬停在按钮上时，背景颜色会从蓝色逐渐过渡到红色，持续时间为 1 秒。

csstransition

CSS Transition是一种CSS属性，用于在元素状态发生变化时实现平滑过渡效果。通过CSS Transition，可以定义元素在不同状态之间的过渡动画，例如改变元素的位置、大小、颜色等属性时，可以通过过渡效果使其变化更加平滑和自然。

CSS Transition的基本语法如下：

transition: property duration timing-function delay;

- property：指定要过渡的CSS属性，可以是单个属性或多个属性组合，多个属性之间用逗号分隔。
- duration：指定过渡的持续时间，可以使用秒（s）或毫秒（ms）作为单位。
- timing-function：指定过渡的时间函数，用于控制过渡的速度曲线，常见的值有linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）等。
- delay：指定过渡开始前的延迟时间，同样可以使用秒或毫秒作为单位。

以下是一个示例：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out;
}

.box:hover {
  width: 200px;
}

在上述示例中，当鼠标悬停在.box元素上时，宽度从100px过渡到200px，过渡时间为1秒，速度曲线为缓入缓出。