取消
CSS基础-过渡动画

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 属性。

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

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

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

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

css