实用的 CSS — 贝塞尔曲线(cubic-bezier)和Steps的用法

前言

在了解cubic-bezier之前，你需要对CSS3中的动画效果有所认知，它是和中一个重要的内容。

本体

简介

cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线的函数，规定是。

我们可以从下图中简要理解一下 alt text 从上图我们需要知道的是的取值范围：

P0：默认值(0,0)
P1：动态取值(x1,y1)
P2：动态取值(x2,y2)
p3：默认值(1,1) 我们需要关注的是P1和P2两点的取值，而其中的取值范围是0到1。当取值超出范围时cubic-bezier将失效；Y轴的取值没有规定，当然也毋须过过大。

最直接的理解是，将以易涛直线放在范围只有1的坐标轴中，并从中间拿出两个点来拉扯（X轴的取值区间是[0,1]，Y轴任意），最后形成的曲线就是动画的速度曲线

使用

在测试栗子中：

html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style>
      .animation {
        width: 50px;
        height: 50px;
        background-color: #ed3;
        -webkit-transition: all 2s;
        -o-transition: all 2s;
        transition: all 2s;
      }
      .animation:hover {
        -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

我们可以在浏览器中看到，当鼠标移到元素上时，元素开始向右移动，开始比较慢，之后则比较快，移开时按原曲线回到原点。

在例子中，当我们不为：

几个常用的固定值对应的 cubic-bezier 值以及速度曲线

：cubic-bezier(.25, .1, .25, 1)

alt text 2. ：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0) 3. ：cubic-bezier(.42, 0, 1, 1) 4.cubic-bezier(0, 0, .58, 1) 5.：cubic-bezier(.42, 0, .58, 1) 6.（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)