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>

打字机效果