CSS3 过渡动画：transition属性

2023-8-11

CSS3新添加了过渡动画，即使用者定义好一个元素的开始状态和结束状态， CSS会根据变化曲线形成补间动画效果。

CSS3中用transition属性来描述动画如何运动。

transition

定义

// width 表示什么属性需要用到过渡动画， 这里的例子是 宽度// 1s 表示动画时长// linear 表示的是一种变化曲线// 0s 表示延迟时间， 代表动画被延迟几秒后执行transition: width 1s linear 0s

下面我们重点聊聊两点:

1. 哪个属性需要过渡?

2. 变化曲线.

CSS中哪些属性可以被过渡

所有数值类型的都可以过渡，例如: height, width, border-radius 等。
背景颜色和文字。
所有的变形（上两篇讲的2D和3D变形）。
如果需要全部属性有动画效果，则第一个参数写 all。

示例

正方形变圆形（border-radius 属性过渡）。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>直角变圆角</title>    <style>      .box {        width: 200px;        height: 200px;        background-color: red;        border-radius: 0;        margin: auto;      }
      .box:hover {        border-radius: 50%;        transition: border-radius 1s linear 0s;      }</style>  </head>  <body>    <div class="box"></div>  </body></html>

缓动曲线

缓动曲线也叫缓动参数，就是一种指定速率的变化曲线。

根据变化速率的不同分成了上述的几种曲线。如果这几种曲线在生产过程中并不符合要求，可以使用以下网址生成曲线。生成的这种线叫贝塞尔曲线。

网址：https://cubic-bezier.com/

自定义曲线

通过 https://cubic-bezier.com/ 生成曲线函数（设置方向和速率），并点击拷贝函数。

将曲线函数拷贝到代码中，本次示例描述一个方块按照我们定义的运动曲线从左到右做直线运动。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>贝塞尔曲线</title>    <style>      * {        margin: 0;        padding: 0;      }
      .box {        border: 1px solid #000;      }
      .sonBox {        margin-top: 5px;        width: 50px;        height: 50px;        background-color: orange;        margin-bottom: 10px;        position: relative;        left: 0;      }
      .box:hover .sonBox {        left: 1000px;        transition: left 5s cubic-bezier(0.27, 0.96, 0.82, 0.13) 0s;      }</style>  </head>  <body>    <div class="box">      <div class="sonBox"></div>    </div>  </body></html>

总结

过渡动画用 transition 属性。

过渡属性决定了哪些属性参与过渡动画。

动画时长决定了动画播放时间。

缓动曲线决定了运动的速率。

延迟动画决定了动画被延迟几秒后播放。

THE END