打字机效果以及animation中的steps()函数

最新推荐文章于 2024-05-13 11:05:12 发布

高桥靓仔

最新推荐文章于 2024-05-13 11:05:12 发布

阅读量392

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45221036/article/details/106896650

版权

<head>
    <meta charset="UTF-8">
    <title>打字机效果</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        body {
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #222;
        }

        .line {
            width: 674px;
            border-right: 2px solid #eee;
            font-size: 28px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }

        .animation {
            animation: grow 4s steps(44) 1s normal both, 
            blink 0.5s steps(44) infinite normal;
        }

        @keyframes grow {
            from {
                width: 0;
            }
            to {
                width: 647px;
            }
        }

        @keyframes blink {
            from {
                border-right-color: #eee;
            }
            to {
                border-right-color: #222;
            }
        }
    </style>
</head>

<body>
    <p class="line animation">
        Animation typewriter style using css steps()
    </p>
</body>

在这里插入图片描述
这个特效里面我们可以看到用到了CSS动画animation，有个控制时间的属性timing-function。

它的取值中除了常用到的 贝塞尔曲线 (linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))以外，还有个让人比较困惑的 steps() 函数。steps(n,start/end) 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

steps 有两个参数

第一个肯定是分几步执行完
第二个有两个值
- start第一帧是第一步动画结束
- end 第一帧是第一步动画开始

W3C的解释:

steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

在这里插入图片描述
当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。

我们看我们小人的例子，当为start时，我们看到的是视觉动画的1/6的末状态。会跳帧不连续。我们会想了，我们直接把这个动画的第一帧写在background-position: -0 0;不就可以了么，但是这个想多了。因为动画开始执行的时候我们基本是看不到这个的变化的，而且重复开始之后就不再起作用了。（上边的人里有这个属性，我们是看不到第一帧的）
在这里插入图片描述
当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3

高桥靓仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
打字机效果以及animation中的steps()函数

<head> <meta charset="UTF-8"> <title>打字机效果</title> <style type="text/css"> html, body { height: 100%; } body { overflow: hidden; display: flex;..
复制链接

扫一扫