📌  相关文章
📜  动画计时函数css(1)

📅  最后修改于: 2023-12-03 15:07:18.617000             🧑  作者: Mango

动画计时函数 CSS

简介

CSS 动画计时函数用于控制动画的时间进程，使动画显示出多样的效果和风格。可以通过 CSS 的 transition 或 animation 属性来使用动画计时函数。

常见的计时函数

  1. linear

    线性计时函数，即匀速运动。动画状态变化按照恒定的速率完成。

    transition-timing-function: linear;
animation-timing-function: linear;

  2. ease

    缓入缓出，又称为默认的 CSS 动画计时函数。开始和结束时的速度较慢，中间的速度较快。

    transition-timing-function: ease;
animation-timing-function: ease;

  3. ease-in

    缓入，即动画状态变化开始时速度较慢，中间加速。适用于弹窗、下拉菜单等效果。

    transition-timing-function: ease-in;
animation-timing-function: ease-in;

  4. ease-out

    缓出，即动画状态变化结束时速度较慢，中间减速。适用于切换页面、关闭弹窗等效果。

    transition-timing-function: ease-out;
animation-timing-function: ease-out;

  5. ease-in-out

    缓进缓出，即动画状态变化开始和结束时速度较慢，中间加减速。适用于大部分场景。

    transition-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
自定义计时函数

如果上面的计时函数不能满足您的需求，您可以自行定义计时函数。

自定义计时函数需要用到贝塞尔曲线，根据控制点的位置绘制出曲线。

贝塞尔曲线

贝塞尔曲线是指平面或三维空间中的一类参数曲线。

其中二次方贝塞尔曲线只需两个控制点，三次方贝塞尔曲线需要三个控制点。

贝塞尔曲线的控制点使用坐标表示，用 x,y 形式表示，使用逗号分隔。

下面是三次方贝塞尔曲线的表示方式：

cubic-bezier(x1, y1, x2, y2)

其中 x1 和 y1 表示第一个控制点， x2 和 y2 表示第二个控制点。

自定义计时函数示例

下面是一个自定义的计时函数，具体的效果请见下面的演示。

cubic-bezier(0.175, 0.885, 0.32, 1.275);
演示

下面是一个使用 linear 计时函数的示例，您可以修改计时函数来查看不同的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Transiton-timing-function demo</title>
    <style>
      div {
        background-color: #28a745;
        color: white;
        font-size: 24px;
        height: 50px;
        width: 100px;
        transition: all 1s linear;
      }

      div:hover {
        background-color: #007bff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>Hover me</div>
  </body>
</html>

效果如下：

demo.gif