web前端动画--animation steps(num,type)详解

最新推荐文章于 2025-04-29 14:55:59 发布

有头发的光头强

最新推荐文章于 2025-04-29 14:55:59 发布

阅读量830

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CS13477062349/article/details/88870666

本文详细介绍了CSS动画中的关键属性，特别是timing-function的steps(num,type)函数。通过实例展示了如何使用steps函数来实现阶梯式动画效果，并解释了start和end参数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般动画用到的几个属性：

animation:name duration timing-function delay iteration-count direction

其实这里主要介绍的是 timing-function 的steps(num,type)

1.它是一个阶跃性函数，就是说它没有中间渐变的过程，直接从一个状态变到另一个状态；

2.它的第一个参数作用于每两个关键帧之间，把他分成num段；第二个参数每个阶段的起点或终点发生阶跃性变化

如：

@keyframes run{
    0%{
        width:0%;
    }
    50%{
        width:50%;
    }
    100%{
        width:100%;
    }
}
steps(2) 就是把没两个帧之间分成2段，变成
@keyframes run{
    0%{
        width:0%;
    }
    25%{
        width:25%;
    }
    50%{
        width:50%;
    }
    75%{
        width:75%;
    }
    100%{
        width:100%;
    }
}

第二个参数默认是end

如：

div{
    animation:run 1 steps(1,start) 1 infinite/**无限次循环*/ alternate/**允许动画逆向执行*/;
    -webkit-animation:run 1 steps(1,start) 1 infinite alternate;
}
@keyframes run{
    0%{
        background:green;
    }
    50%{
        background:yellow;
    }
    100%{
        background:red;
    }
}
当位steps(1,end)时，就是不断的绿色 黄色 变化
当位steps(1,start)时，就是不断的黄色 红色 变化

start,end 2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%
step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了黄色yellow
step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red