动画时间函数-非线性函数step-526互联

steps(n, <jumpterm>)

按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下跳跃项之一：

jump-start: 表示一个左连续函数，因此第一个跳跃发生在动画开始时。
jump-end: 表示一个右连续函数，因此最后一个跳跃发生在动画结束时。
jump-none: 两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。
jump-both: 在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。
start: 等同于 jump-start。
end: 等同于 jump-end。
step-start: 等同于 steps(1, jump-start)。
step-end: 等同于 steps(1, jump-end)。

利用非线性函数实现分针的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="circle">
        <div class="second"></div>
    </div>
</body>

</html>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 100vh;
        /* width: 100vw; */

    }

    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid black;
        display: flex;
        justify-content: center;
    }

    .second {
        height: 50%;
        width: 1px;
        background: black;
        transform-origin: center bottom;
        animation: round 60s steps(60,end) infinite;
    }

    @keyframes round {
        100% {
            transform: rotate(360deg);
        }

    }
</style>