css动画的补充

运动曲线的细节

animation-timing-function:<值>

描述
linear动画从头到尾的速度是相同的。 运算
ease默认。动画以低速开始,然后加快,在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
steps()指定了时间函中的间隔的数量(步长),可以形成停顿跳跃的效果

steps(n) 步长

不同于ease的先快后慢,steps感觉是一步步跳跃过去的,我们可以对比一下

ease 先快后慢

        div {
            width: 0;
            height: 50px;
            background-color: pink;
            animation: w 2s forwards ease;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }

        }

ease

steps感觉是一步步跳跃过去的

animation: w 2s forwards steps(10);这里我们分了10步

steps

看 感觉每次都是跳跃过去的。

实现打字机效果

​ 思路:动画位开始前 没有宽度 然后依次增加宽度使得每次刚好增加一个字的宽度 。这里为了只显示”打出来的字“,我们可以

限制在一行上,然后溢出隐藏。overflow: hidden;white-space: nowrap;

    <style>
        body {
            background-color: #000;
        }

        div {
            width: 0;
            margin: 100px auto;
            color: #fff;
            font-size: 32px;
            text-align: center;
            animation: dzj 6s steps(13) forwards infinite;
            overflow: hidden;
            white-space: nowrap;
        }

        @keyframes dzj {
            0% {
                width: 0;
            }

            100% {
                width: 416px;
            }
        }
    </style>

<body>
    <div>越行勤,努力学习的小菜鸟!</div>
</body>

打字机效果

结语

放假咸鱼的第14天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/08/c-s-s--dong-hua-zhi-shi-dian-de-bu-chong--shi-xian-da-zi-ji-de-xiao-guo
最后更新于:  258  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟