CSS - 缓动函数

上一页
下一页

CSS 缓动函数用于控制元素两个状态之间过渡或动画的速度。它定义了属性随时间变化的速率，影响动画期间的加速和减速。

以下是一些值得注意的要点

  • 两个值之间的过渡可以应用于各种上下文，包括动画，以控制值变化的速率。

  • 这允许在整个持续时间内动态调整动画速度。

  • CSS <transitions> 和 <animations> 属性可以使用缓动函数进行自定义以指定此行为。

缓动函数类型

CSS 中可以使用三种主要的缓动函数类型，如下所示

  • 线性函数 (linear)，

  • 三次贝塞尔曲线函数 (包括 ease、ease-in、ease-out 和 ease-in-out)，

  • 阶梯函数 (steps)。

线性函数

使用线性计时函数，动画以恒定速度遍历关键帧。可以传递以下关键字

  • linear - 动画以恒定速度进行。

  • linear-easing-function - 这描述了 linear() 函数，该函数用于管理动画或过渡的进度。它使用一个停止列表 linear-stop-list，其中每个点都指定为 0 到 1 之间的一个数字。这可以具有 <number> 或 <percentage> 值。

三次贝塞尔曲线函数

CSS 中的此功能定义了 贝塞尔曲线，这些曲线会影响动画或过渡的进度，并具有四个控制点：起点、终点和两个控制点。

它有助于创建自定义缓动效果。三次贝塞尔曲线函数由四个控制点定义，它允许精确控制动画的加速和减速。预定义的关键字值包括

  • ease - 此术语表示逐渐的初始插值，然后是快速的加速和逐渐的减速到结束。此术语对应于缓动函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。

  • ease-in - 此术语表示插值从缓慢开始，然后变得越来越快，直到突然在结束时停止。此关键字对应于缓动函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

  • ease-out - 此术语表示插值突然开始，然后逐渐减速到结束。此关键字对应于缓动函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。

  • ease-in-out - 此关键字表示一个插值，它从缓慢开始，加速，然后在结束时减速。它使用缓动函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)，并且在开始时表现得类似于 ease-in，在结束时表现得类似于 ease-out。

<cubic-bezier()> - 此函数使用四个 <number> 值来定义曲线的形状。cubic-bezier(x1, y1, x2, y2)

X 坐标 (x1 和 x2) 表示时间比率，并限制在 0 到 1 之间的值（动画不能早于或持续时间长于指定时间），而 Y 坐标 (y1 和 y2) 表示动画输出及其值。

阶梯函数

阶梯函数使动画能够以非连续的方式跳跃到特定数量的帧之间。您可以将其视为“滴答”动画。它接受以下关键字

step-start - 此关键字表示缓动函数 steps(1, jump-start) 或 steps(1, start)。它表示突然跳到插值的最终状态，并在完成之前保持此状态。

step-end - 此关键字表示缓动函数 steps(1, jump-end) 或 steps(1, end)。这意味着插值会保持其初始状态直到结束，然后快速更改为最终状态。

steps() - 此函数采用一个正 <integer> 和一个可选的 <step-position>。

  • <integer> - 表示均匀间隔或步骤的数量。它应该是一个大于 0 的正整数，除非第二个参数是 jump-none，在这种情况下，它必须是一个大于 1 的正整数。

  • <step-position> - 指定跳跃发生的时间 - 在开始时、在结束时、在开始和结束时或两者都不在。可用的关键字值包括

    • jump-start - 这意味着初始跳跃发生在开始时，基本上在点 0 处，在 0% 标记处没有花费时间。

    • jump-end - 这意味着最后一个跳跃发生在结束时，基本上在点 1 处，在 100% 标记处没有花费时间。如果没有指定 <step-postion>，则这是默认值。

    • jump-none - 这消除了开始和结束时的跳跃，并在持续时间中省略了一步。进度在 0% 和 100% 标记处保持稳定，持续时间由总持续时间除以步骤数 (1/n) 确定。

    • jump-both- 这涉及在开始和结束时都进行跳跃，发生在 0 和 1 点。这有效地在两端都添加了一步，在 0% 和 100% 标记处没有花费时间。

    • start - 是 jump-start 的等效术语。

    • end- 是 jump-end 的等效术语

语法

/* linear function and keyword */
/* linear(<point-list>) */
linear(1, -0.5, 0)
linear

/* cubic-bezier function and keywords */
/* cubic-bezier(<x1>, <y1>, <x2>, <y2>) */
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
ease-in
ease-out
ease-in-out

/* steps function and keywords */
/* steps(<number-of-steps>, <direction>) */
steps(4, end)
steps(10, jump-both)
step-start
step-end

CSS 缓动函数 - linear-easing

以下示例创建了一个使用 linear-easing 函数水平移动的红色框。动画持续 4 秒，并无限重复，导致框连续来回移动。

<html>
<head>
<style>
   .box {
      width: 100px;
      height: 100px;
      margin: 150px;
      background-color: red;
      text-align:center;
      font-size:20px;
      position: relative;
      display: flex;
  	   justify-content: center;
  	   align-items: center;
      animation: move 4s linear infinite;
   }
   @keyframes move {
      0% {
         left: 5%;
      }
      100% {
         left: 60%;
      }
   }
</style>
</head>
<body>
   <div class="box">Linear Easing Function</div>
</body>
</html>

CSS 缓动函数 - 带值的 linear-easing

以下示例演示了接受值的各种 linear-easing 函数。

动画从位置 0 开始，并直接向前移动到 0.25。之后，它继续直线前进，直到到达 1。动画在其运行时间内的进度由符号 linear(0, 0.25 75%, 1) 表示。

<html>
<head>
<style>
   .box {
      width: 100px;
      height: 100px;
      margin: 150px;
      background-color: red;
      text-align:center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:20px;
      position: relative;
      animation: move 4s linear infinite;
   }
   .linear-demo-1 {
      animation-name: linear-custom;
      animation-timing-function: linear(0, 0.25 75%, 1);
   }
    @keyframes linear-custom {
      from {transform: translateX(0);}
      to {transform: translateX(350px);}
   }
</style>
</head>
<body>
<div class="box linear-demo-1">Linear Custom</div>
</body>
</html>

CSS 缓动函数 - cubic-bezier

以下示例演示了各种 cubic-bezier 函数。

ease-in 框从缓慢开始并加速，ease-out 框从快速开始并减速，ease-in-out 框从缓慢开始，在中间加速，然后在动画结束时减速。

<html>
<head>
<style>
   .box {
      width: 100px;
      height: 100px;
      background-color: #0077FF;
      margin: 20px auto;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      text-align: center;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .ease-in-demo {
      animation-name: easeIn;
      animation-timing-function: ease-in;
   }
   .ease-out-demo {
      animation-name: easeOut;
      animation-timing-function: ease-out;
   }
   .ease-in-out-demo {
      animation-name: easeInOut;
      animation-timing-function: ease-in-out;
   }
   @keyframes easeIn {
      from {transform: translateX(0);}
      to {transform: translateX(400px);}
   }
   @keyframes easeOut {
      from {transform: translateX(0);}
      to {transform: translateX(400px);}
   }
   @keyframes easeInOut {
      from {transform: translateX(0);}
      to {transform: translateX(400px);}
   }
</style>
</head>
<body>
   <div class="box ease-in-demo">Ease-in</div>
   <div class="box ease-out-demo">Ease-out</div>   
   <div class="box ease-in-out-demo">Ease-in-out</div>
</body>
</html>

CSS 缓动函数 - 带值的 cubic-bezier。

以下示例演示了带值的各种 cubic-bezier 函数。

通过此配置，会产生动画效果，其中每个框在使用不同的 cubic-bezier 计时函数从其初始位置向右移动 300 像素时具有不同的运动行为。

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 110px;
      background-color: #e3bd56;
      margin: 20px auto;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      text-align: center;
      font-size: 20px;
      left:10px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .cubic-bezier-demo-1 {
      animation-name: cubicBezier1;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
   }
   .cubic-bezier-demo-2 {
      animation-name: cubicBezier2;
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
   }
   .cubic-bezier-demo-3 {
      animation-name: cubicBezier3;
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
   .cubic-bezier-demo-4 {
      animation-name: cubicBezier4;
      animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   }
   @keyframes cubicBezier1 {
      from {transform: translateX(0);}
      to {transform: translateX(300px);}
   }
   @keyframes cubicBezier2 {
      from {transform: translateX(0);}
      to {transform: translateX(300px);}
   }
   @keyframes cubicBezier3 {
      from {transform: translateX(0);}
      to {transform: translateX(300px);}
   }
   @keyframes cubicBezier4 {
      from {transform: translateX(0);}
      to {transform: translateX(300px);}
   }
</style>
</head>
<body>
   <div class="box cubic-bezier-demo-1">Cubic Bezier (0.25, 0.1, 0.25, 1)</div>
   <div class="box cubic-bezier-demo-2">Cubic Bezier (0.42, 0, 0.58, 1)</div>   
   <div class="box cubic-bezier-demo-3">Cubic Bezier (0.55, 0.055, 0.675, 0.19)</div>
   <div class="box cubic-bezier-demo-4">Cubic Bezier (0.95, 0.05, 0.795, 0.035)</div>
</body>
</html>

CSS 缓动函数 - step-easing

以下示例演示了各种 step-easing 函数。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .box {
      width: 100px;
      height: 50px;
      background-color: red;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   .jump-start {
      animation-timing-function:steps(6, jump-start);
   }
   .jump-end {
      animation-timing-function:steps(6, jump-end);
   }
   .jump-both {
      animation-timing-function:steps(6, jump-both);
   }
   .jump-none {
      animation-timing-function:steps(6, jump-none);
   }
   .step-start {
      animation-timing-function: step-start;
   }
   .step-end {
      animation-timing-function: step-end;
   }
   .start {
      animation-timing-function: steps(6, start);
   }
   .end {
   animation-timing-function: steps(6, end);
   }
   @keyframes move {
      0%, 100% {
      transform: translateY(0);
      }
      50% {
      transform: translateY(250px);
      }
   }
</style>
</head>
<body>
<div class="box jump-start">Jump-start</div>
<div class="box jump-end">Jump-end</div>
<div class="box jump-both">Jump-both</div>
<div class="box jump-none">Jump-none</div>
<div class="box step-start">Step-start</div>
<div class="box step-end">Step-end</div>
<div class="box start">Start</div>
<div class="box end">End</div>
</body>
</html>
打印页面
上一页
下一页
广告