码农教程 - 一技在手,衣食无忧! tools

目录

CSS 过渡

❮ 上一节 下一节 ❯

CSS 过渡

CSS 过渡允许您在给定的持续时间内平滑地更改属性值。

将鼠标悬停在下面的元素上即可查看 CSS 过渡效果：

CSS

在本章中，您将了解以下属性：

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

浏览器对过渡的支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

如何使用 CSS 过渡？

要创建过渡效果，您必须指定两件事：

  • 您想要添加效果的 CSS 属性
  • 效果的持续时间

笔记：如果未指定持续时间部分，则过渡将不起作用，因为默认值为 0。

以下示例显示了一个 100px * 100px 红色 <div> 元素。 <div> 元素还为 width 属性指定了过渡效果，持续时间为 2 秒：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的CSS属性（宽度）改变值时，过渡效果将开始。

现在，当用户将鼠标悬停在 <div> 元素上时，让我们为 width 属性指定一个新值：

示例

div:hover {
  width: 300px;
}
亲自试一试 »

请注意，当光标移出元素时，它会逐渐变回原来的样式。

更改多个属性值

以下示例为 width 和 height 属性添加过渡效果，宽度持续时间为 2 秒，高度持续时间为 4 秒：

示例

div {
  transition: width 2s, height 4s;
}
亲自试一试 »

指定过渡的速度曲线

这个transition-timing-function属性指定过渡效果的速度曲线。

转换计时函数属性可以具有以下值：

  • ease- 指定一个缓慢开始，然后快速，然后缓慢结束的过渡效果（这是默认值）
  • linear- 指定从开始到结束具有相同速度的过渡效果
  • ease-in- 指定缓慢启动的过渡效果
  • ease-out- 指定缓慢结束的过渡效果
  • ease-in-out- 指定缓慢开始和结束的过渡效果
  • cubic-bezier(n,n,n,n)- 让您在三次贝塞尔函数中定义自己的值

以下示例显示了一些可以使用的不同速度曲线：

示例

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
亲自试一试 »

延迟过渡效果

这个transition-delay属性指定过渡效果的延迟（以秒为单位）。

以下示例在开始前有 1 秒的延迟：

示例

div {
  transition-delay: 1s;
}
亲自试一试 »

过渡+转型

以下示例为转换添加过渡效果：

示例

div {
  transition: width 2s, height 2s, transform 2s;
}
亲自试一试 »

更多过渡示例

CSS 过渡属性可以一一指定，如下所示：

示例

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
亲自试一试 »

或者使用简写属性transition：

示例

div {
  transition: width 2s linear 1s;
}
亲自试一试 »

通过练习测试一下

练习:

为 <div> 元素的宽度变化添加 2 秒过渡效果。

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  : ;
}

div:hover {
  width: 300px;
}
</style>

<body>
  <div>This is a div</div>
</body>

开始练习

CSS 过渡属性

下表列出了所有 CSS 过渡属性：

Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect

❮ 上一节 下一节 ❯