CSS - transition 属性

CSS transition 属性允许您在指定持续时间内为元素的样式属性更改添加动画效果。它们提供了一种简单有效的方法，无需复杂的 JavaScript 代码或外部库即可为网页元素添加动画。

CSS transition 属性是以下属性的简写：

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;

transition 属性的值定义如下：

none 值表示此元素将没有过渡效果。这是默认值。
使用逗号分隔一个或多个单属性过渡。

单属性过渡指定一个特定属性或所有属性的过渡。这包括：

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

CSS 过渡 - 使用两个值

以下示例演示将过渡应用于padding 属性，持续时间为2s。当您将鼠标悬停在方框上时，填充增加到15px，背景颜色更改为greenyellow：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - delay 值

以下示例演示将过渡应用于padding 属性。过渡需要2s才能完成，并在延迟0.5s后开始：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - 缓动函数

以下示例演示将过渡应用于background-color 属性。当您将鼠标悬停在方框上时，背景颜色将更改为绿黄色，在4s 的持续时间内使用ease-in-out 定时函数开始平滑的颜色过渡：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - 缓动函数和延迟

以下示例演示将过渡应用于padding 属性。当您将鼠标悬停在方框上时，背景颜色将更改为绿黄色，填充增加到 15px，在4s 的持续时间内使用ease-in-out 定时函数开始平滑过渡，并延迟0.7s：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - behavior 值

以下示例演示将过渡应用于background-color 属性。当您将鼠标悬停在方框上时，背景颜色将更改为绿黄色，在5s 的持续时间内使用allow-discrete 定时函数开始平滑过渡：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - 应用于两个属性

以下示例演示将对文本颜色应用2s 的过渡，对margin-left 应用4s 的过渡。文本颜色将在2s 内过渡，而左外边距将需要4s：

<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">Hover over me</div>
</body>
</html>

CSS 过渡 - 相关属性

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

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

打印页面