本篇文章给大家带来《css3 transition 语法》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

在 CSS3 中，我们使用 transition 属性来创建过渡效果。过渡是指将元素的样式从一种状态逐步改变为另一种状态。例如，当鼠标悬停在按钮上时，按钮的颜色可以平滑地从一种颜色过渡到另一种颜色。

要创建过渡效果，我们需要定义以下内容：

• 要添加过渡效果的 CSS 属性
• 过渡效果的持续时间
• 过渡效果的时间函数（可选）
• 过渡效果的延迟时间（可选）

transition 属性是以下四个属性的简写属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition-property

transition-property 属性指定要添加过渡效果的 CSS 属性的名称。您可以指定一个或多个属性，多个属性之间用逗号分隔。

例如，以下代码将为元素的宽度和高度添加过渡效果：

transition-property: width, height;

如果您想为所有属性添加过渡效果，可以使用 all 关键字：

transition-property: all;

transition-duration

transition-duration 属性指定过渡效果的持续时间。您可以使用秒 (s) 或毫秒 (ms) 来指定持续时间。

例如，以下代码将使过渡效果持续 2 秒：

transition-duration: 2s;

transition-timing-function

transition-timing-function 属性指定过渡效果的速度曲线。您可以使用预定义的关键字或三次贝塞尔函数来指定速度曲线。 石家庄人才网小编提醒您，常用的预定义关键字包括：

• ease：默认值，过渡效果的速度曲线是先慢后快再慢
• linear：过渡效果的速度曲线是匀速的
• ease-in：过渡效果的速度曲线是逐渐加速的
• ease-out：过渡效果的速度曲线是逐渐减速的
• ease-in-out：过渡效果的速度曲线是先加速后减速

transition-delay

transition-delay 属性指定过渡效果的延迟时间。您可以使用秒 (s) 或毫秒 (ms) 来指定延迟时间。 石家庄人才网小编提示，例如，以下代码将使过渡效果延迟 1 秒开始：

transition-delay: 1s;

transition 简写属性

您可以使用 tran

transition: <property> <duration> <timing-function> <delay>;

例如，以下代码将为元素的宽度添加一个持续 2 秒、速度曲线为 ease、延迟 1 秒开始的过渡效果：

transition: width 2s ease 1s;

石家庄人才网小编对《css3 transition 语法》内容分享到这里，如果有相关疑问请在本站留言。