CSS 过渡 - 易学教程，面试笔记经验！

CSS transition过渡属性允许您在指定的持续时间内对元素的样式属性进行动画更改。它们提供了一种简单有效的方法来向 Web 元素添加动画，而无需复杂的 JavaScript 代码或外部库。

CSS 过渡属性是

transition-property
transition-duration
transition-timing-function
transition-delay
transition-behavior（此属性处于实验阶段，可能不受支持）。

属性值

<length> - 长度值，例如像素 (px)、厘米 ( cm)、英寸(in)等。

适用范围

所有元素，::before 和 ::after 伪元素。

语法

transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;

过渡属性的值定义为以下之一:

none 值表示该元素上不会有任何转换。这是默认值。
逗号用于分隔一个或多个单属性转换。

单个属性转换，转换指定一个特定属性或所有属性的转换。这包括:

一个零或一个值，指示应应用转换的一个或多个属性。可以指定为:
- <custom-ident> 表示单个属性。
- transitions 中的 all 值表示该过渡将应用于当元素更改其状态时发生更改的所有属性
- 如果未指定值，则将采用所有值，并且转换将应用于所有更改的属性。
指定零或一个 <easing-function> 值，指示要使用的缓动函数。
为过渡属性指定零、一或两个 <time> 值。第一个解析时间值应用于 transition-duration，第二个解析时间值分配给 transition-delay .
如果属性具有离散动画行为，则零或一值指示是否启动转换。如果该值存在，则它可以是allow-discrete 或普通关键字。

CSS transition: 具有两个值

以下示例演示了过渡应用于 padding 属性，持续时间为 2 秒。当您将鼠标悬停在该框上时，内边距增加到 15 像素，背景颜色变为绿黄色 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 延迟值

以下示例演示了过渡应用于内边距值。过渡需要 2 秒才能完成，延迟 0.5 秒后开始 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s .5s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 缓动函数

以下示例演示过渡应用于背景颜色。当您将鼠标悬停在该框上时，背景颜色会变为绿黄色，在 4 秒的持续时间内通过缓入计时函数开始平滑的颜色过渡 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 15px;
      transition: background-color 4s ease-in-out;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 缓动函数和延迟

以下示例演示了将过渡应用于填充属性。当您将鼠标悬停在该框上时，背景颜色会变为绿黄色，并且填充会增加到 15px，在 4 秒的持续时间内开始平滑过渡，并具有缓入缓出计时功能和 0.7 秒的延迟 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 4s ease-in-out 0.7s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 行为值

以下示例演示过渡应用于背景颜色属性。当您将鼠标悬停在该框上时，背景颜色会变为绿黄色，使用允许离散计时函数在 5 秒的时间内开始平滑过渡 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: background-color 5s allow-discrete;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 应用于两个属性

以下示例演示了过渡将在 2 秒内应用于文本颜色，并在 4 秒内应用于页边距。文本颜色将在 2 秒内过渡，而左边距将需要 4 秒 -

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: color 2s, margin-left 4s;
      background-color: lightskyblue;
   }
   .box:hover {
      color: red;
      margin-left: 70px;
   }
</style>
</head>
<body>
   <div class="box">鼠标悬停看效果</div>
</body>
</html>

CSS transition: 相关属性

以下是与过渡相关的 CSS 属性列表:

属性	值
transition-delay	确定属性值更改时启动过渡效果之前等待的时间。
transition-duration	确定完成过渡动画所需的时间。
transition-property	指定哪些 CSS 属性应该有过渡应用效果。
transition-timing-function	确定为受过渡效果影响的 CSS 属性生成哪些中间值。

CSS transition 过渡效果

属性值