CSS中的steps()函数表现

116 阅读 0 评论 77 点赞

我是靠谱客的博主舒适柠檬，最近开发中收集的这篇文章主要介绍CSS中的steps()函数表现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

step(arg1,arg2)

arg1:是一个数字表示动画的状态从0%到100%经历多少步。

arg2：值可以为start或end,默认为end。

情形1：end表示在一个周期的结尾赋值，当值为end时会由默认状态0%到第一次变更值作为第一步，并忽略掉最后一步。

该过程分为以下几个阶段:

第一阶段：默认状态到第一次赋值之前(不显示文字，此时的width大小为0)

第二阶段：第一次赋值到第二次赋值之前(显示"前"，此时的width大小为20px)

第三阶段:第二次赋值到第三次赋值之前(显示"前端"，此时的width大小为40px)

第四阶段:第三次赋值到第四次赋值之前(显示"前端学"，此时的width大小为60px)

第五阶段:此时本该发生第四次赋值，但是由于step的第二个参数为end所以赋值的时间处于时间轴的结束位置，没有时长来承载第五个阶段，所以就直接结束了而没有表现出来。

QQ录屏20200908135724

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            white-space: nowrap;
            background-color: pink;
            font-size: 20px;
            animation: nai 2s steps(4);
        }
        
        @keyframes nai {
            0% {}
            100% {
                width: 80px;
            }
        }
    </style>

    <head>

        <body>
            <div class="box1">
                前端学习
            </div>
        </body>

</html>

解决方案:

1、如果动画的播放次数为1次并且动画播放结束状态为forwards，则设置动画播放结束状态为forwards就行了。

2、如果动画的播放次数超过一次，则可以多添加一帧的长度，让其被丢弃。

情形2:start表示在一个周期的开始进行赋值，也就是说不存在0%到第一次赋值这个阶段了。阶段

第一阶段：第一次赋值到第二次赋值之前

第二阶段：第二次赋值到第三次赋值之前