CSS - animation-timing-function 属性

CSS animation-timing-function 属性决定动画的速度曲线，它决定动画从一组 CSS 样式过渡到另一组 CSS 样式所花费的时间。它决定了动画的节奏。

语法

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;

属性值

值	描述
linear	动画从开始到结束速度相同。
ease	动画开始缓慢，然后加速，然后再次减速。默认值。
ease-in	动画开始缓慢，然后加速。
ease-out	动画正常播放，但在结束时减速。
ease-in-out	动画开始缓慢，然后加速，然后再次减速。
step-start	动画在关键帧动画开始时直接跳转到结束状态。
step-end	动画在关键帧动画结束时跳转到结束状态。
steps(int,start\|end)	它指定一个步进函数，其中包含步骤数以及开始或结束位置（例如，steps(6, end)）。
cubic-bezier(n,n,n,n)	它使用三次贝塞尔曲线定义自定义计时函数（例如，cubic-bezier(0.25, 0.1, 0.25, 1.0)）。可能的值为 0 到 1。
initial	它将属性设置为其默认值。
inherit	它从其父元素继承属性。

CSS 动画计时函数属性示例

以下示例使用不同的值和函数解释了animation-timing-function属性。

设置动画始终保持相同速度

为了让动画从开始到结束保持相同的速度，我们使用linear值。在下面的示例中，linear 值已用于 animation-timing-function 属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: linear;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Linear value</h3>
</body>

</html>

为动画设置缓慢的开始和结束

为了让动画开始缓慢，然后加速，然后再次减速，我们使用ease值。在下面的示例中，ease 值已用于 animation-timing-function 属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease value</h3>
</body>

</html>

为动画设置缓慢的开始

为了让动画开始缓慢然后加速，我们使用ease-in值。在下面的示例中，ease-in 值已用于 animation-timing-function 属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in value</h3>
</body>

</html>

为动画设置缓慢的结束

为了让动画以正常速度播放，但在结束时减速，我们使用ease-out值。在下面的示例中，ease-out 值已用于 animation-timing-function 属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-out value</h3>
</body>

</html>

为动画设置缓慢的开始和结束

为了让动画开始缓慢，然后加快速度，然后在结束时减速，我们还可以使用 ease-in 和 ease-out 值的组合，即ease-in-out值。在下面的示例中，ease-in-out 值已用于 animation-timing-function 属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in-out value</h3>
</body>

</html>

设置从开始时的突然跳转

为了让动画在动画的关键帧开始时直接到达结束状态，从而导致突然变化，我们使用step-start值。在下面的示例中，step-start 值已用于 animation-timing-function 属性。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-start;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-start</div>
</body>

</html>

设置从结束时的突然跳转

为了让动画在动画的关键帧结束时直接到达结束状态，从而导致突然变化，我们使用step-end值。在下面的示例中，step-end 值已用于 animation-timing-function 属性。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-end;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-end</div>
</body>

</html>

设置分步动画

为了让动画以分步间隔移动，我们使用steps()函数。它接受两个参数，第一个是整数，第二个是“start”或“end”，指定值在间隔内发生变化的点。在下面的示例中，整数为 4，第二个参数为 start。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: steps(4,start);
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Steps(4,start)</div>
</body>

</html>

设置可变速度动画

为了让动画以可变速度进行，我们使用cubic-bezier()函数。此函数表示三次贝塞尔曲线，它由四个点 P0、P1、P2、P3 定义：P0（开始）和 P3（结束）。在下面的示例中，函数中使用了 0.1、0.7、1.0 和 0.1 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: move 6s infinite;
        }

        .cubic {
            animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
        }

        @keyframes move {
            0%,100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
            
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box cubic">Cubic Beizer</div>
</body>

</html>

支持的浏览器

属性
animation-timing-function	43.0	10.0	16.0	9.0	30.0

css_properties_reference.htm

打印页面