transition

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

transition 属性是一个简写属性,用于表示最多四个与过渡相关的完整属性。

.element {
  transition: background-color 0.5s ease;
}

语法

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

演示

transition 属性允许元素在指定持续时间内更改值,从而为属性更改创建动画效果,而不是立即发生更改。因此,如果我们有一个背景为红色的盒子,当鼠标悬停在其上时,我们希望将其背景更改为绿色,我们可以直接使用 transition 属性在背景颜色之间进行过渡。

指定要过渡的属性

请注意,我们在 transition 声明中指明了 background-color 属性。这告诉浏览器,当在悬停和非悬停状态之间发生过渡时,我们计划过渡背景颜色,而不是其他任何属性。另外,我们也告诉浏览器,过渡应该持续两秒钟,并遵循 ease-out 时间函数,这意味着过渡开始时速度很快,然后逐渐减慢到结束。

您可以像上面那样指定特定属性,或者使用 all 值来引用过渡属性。

.element {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
.element:hover {
  background: green;
  padding: 20px;
}

all 指定为简写中的 transition-property 部分。您也可以使用逗号分隔值集,以便对不同的属性进行不同的过渡。

.element {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

在大多数情况下,值的顺序无关紧要——除非指定了延迟。如果您指定了延迟,则必须首先指定持续时间。浏览器识别为有效时间值的第一个值始终代表持续时间。任何后续的有效时间值都将被解析为延迟。

某些属性无法进行过渡,因为它们不是可动画属性。请参阅规范以获取 哪些属性是可动画的的完整列表。

通过在元素本身指定过渡,您可以定义过渡在两个方向上都发生。也就是说,当样式更改时(例如,鼠标悬停时),属性将过渡,当样式恢复时(例如,鼠标移开时),它们也将过渡。例如,下面的演示在鼠标悬停时过渡,但在鼠标移开时不过渡。

浏览器支持

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4*5*10125.1*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.1*6.0-6.1*

使用 transition 的 CSS 技巧

更多信息