CSS 属性

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

CSS 过渡属性是

属性值

  • <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 值表示该元素上不会有任何转换。这是默认值。

  • 逗号用于分隔一个或多个单属性转换。

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

  • 一个零或一个值，指示应应用转换的一个或多个属性。可以指定为:

    • <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 属性生成哪些中间值。