2024年5月7日发(作者：lol图标怎么点亮)

css transition写法

CSS过渡（transition）是一种用于控制元素在变化时的动画效果

的属性，它可以实现元素从一种样式状态平滑地过渡到另一种样式状

态。CSS过渡可以应用于各种属性，比如背景颜色、宽度、高度、边框

等，从而实现各种动画效果，例如渐变、淡出、放大缩小等。本文将

介绍CSS过渡的基本用法、属性说明以及一些实例演示，以帮助读者

充分理解和运用CSS过渡。

一、CSS过渡的基本用法：

CSS过渡的基本语法如下所示：

```css

transition: property duration timing-function delay;

```

其中，

- property：指定要过渡的属性，可以是任意CSS属性，如

background-color、width、height等；

- duration：指定过渡的持续时间，可以是秒（s）或毫秒（ms）

的数值，如0.5s、1000ms等；

- timing-function：指定过渡的速度曲线，常用的值有linear、

ease、ease-in、ease-out等；

- delay：指定过渡开始前的延迟时间，可以是秒（s）或毫秒

（ms）的数值，如0.5s、1000ms等。

可以使用逗号分隔多个属性，这样就可以在一个元素上同时过渡

多个属性。

例如，下面的代码将会使一个按钮的背景颜色在1秒钟内从红色

过渡到蓝色，在过渡开始前延迟0.5秒：

```css

button {

background-color: red;

transition: background-color 1s ease 0.5s;

}