CSS基础-过渡动画-526互联

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

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

transition

定义

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

下面我们重点了解下，哪个属性需要过渡，还有变化曲线是什么

下面我们重点聊聊两点:

哪个属性需要过渡?
变化曲线.

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>

缓动曲线

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

Untitled 1.png

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

自定义曲线

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

Untitled 2.png

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

Untitled 1.gif

<!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>