过渡速记 CSS

在 CSS 中，过渡（transition）是指从一个 CSS 样式属性值平滑地过渡到另一个属性值的效果。通过使用过渡，能够为元素添加平滑的动画效果，让其在不同状态之间流畅地过渡。

语法

下面是过渡的基本语法：

transition: property duration timing-function delay;

其中：

• property：需要过渡的 CSS 属性名称，例如 background-color、opacity 等。
• duration：过渡时间，例如 3s、200ms 等。
• timing-function：指定过渡的时间曲线，在过渡的时间内控制过渡的速度，例如 linear、ease-in-out 等。
• delay：过渡延迟时间，例如 1s、150ms 等。

实例

下面是一个简单的实例，用于在鼠标悬停时，改变 div 元素的背景颜色：

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

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

.box:hover {
  background-color: yellow;
}

总结

通过使用过渡，能够为元素添加平滑的动画效果，增强页面的交互性和视觉效果。在使用过渡时，需要注意过渡的时间、时间曲线以及延迟等参数的设置，以达到最佳的效果。