CSS3 过渡

CSS3 过渡（Transitions）是 CSS3 提供的一种实现元素状态改变时的动画效果的方法。通过在一定的时间范围内平滑地改变一个元素的某个属性值，可以实现各种动画效果。

一、基本语法

CSS3 过渡的基本语法如下：

transition-property: 属性名;
transition-duration: 时间;
transition-timing-function: 缓动函数;
transition-delay: 延迟时间;

其中：

• transition-property 指定应用过渡的 CSS 属性的名称。例如，width、height、margin 等。
• transition-duration 指定过渡效果的持续时间，默认值为 0。
• transition-timing-function 指定过渡效果的时间曲线，可选值包括 linear、ease、ease-in、ease-out、ease-in-out 和 cubic-bezier()。默认值为 ease。
• transition-delay 指定过渡效果开始前的延迟时间，默认值为 0。

二、示例

下面是一个简单的 CSS3 过渡示例，实现了一个元素在鼠标悬停时改变颜色的效果：

div {
  height: 100px;
  background-color: red;
  transition: background-color 2s ease;
}

div:hover {
  background-color: blue;
}

在上面的示例中，我们将 transition 属性应用于 div 元素，指定了过渡效果的持续时间为 2s，时间曲线为 ease。然后，在 div:hover 选择器中，我们将 background-color 属性的值设置为 blue，当鼠标悬停在元素上时，背景色会在 2s 内平滑过渡到蓝色。

本文地址：https://www.tides.cn/p_docs-css3-transition