CSS动画详解：@keyframes与animation属性,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49054076/article/details/129934368

使用animation动画效果，分两步骤：1、用@keyframs定义动画

2、调用动画

@keyframs 动画名称{

0%{ }

100%{ }

}

animation的相关属性

animation-name	动画名字【必写】
animation-duration	完成该动画的秒数【必写】
animation-timing-function	规定运动曲线，默认ease
animation-delay	延迟动画的开始时间，默认0s
animation-iteration-count	重复的次数，默认1次，infinite无限循环
animation-iteration-direction	是否反向播放，默认normal， alternate：反向播放（跑马灯效果）
animation-iteration-play-state	是否暂停，默认running，paused暂停
animation-fill-mode	结束后的状态，默认backwards 回到起始位置 forwards 保持结束时的状态

简写：

animation：名称持续时间运动曲线何时开始播放次数是否反向动画起始或结束状态

打字机显示案例，我们需要用到动画animation，animation中animation-timing-function属性——规定动画运动的曲线.

animation-timing-function的属性值：

值	描述
linear	匀速
ease	默认值，动画由慢到快，再到慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（分几步完成）

效果图：

css代码：

<style>
       p {
            overflow: hidden;
            font-size: 20px;
            width: 0px;
            height: 30px;
            line-height: 30px;
            /* 强制一行显示 */
            white-space: nowrap;
            background-color: pink;
            /* steps 意思是分几步来完成动画 */
            animation: w 5s steps(10) forwards;
        }

        @keyframes w {
            0% {}

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

HTML代码：

<body>

    <p>你在那头，而我在这头</p>

</body>