animation阶跃函数step详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.div-1{width: 200px; height: 20px; background-color: gray; position: relative;}
.div-1::after{content: ''; background-color: red; height: 20px; position: absolute; top: 0; left: 0; animation: progress 10s ease 0s both;}
@keyframes progress{
0% {padding-right: 0%;}
20% {padding-right: 50%;}
40% {padding-right: 70%;}
60% {padding-right: 85%;}
80% {padding-right: 95%;}
100% {padding-right: 100%;}
}
</style>
</head>
<body>
<div class="div-1"></div>
</body>
</html>
这里，是使用::after伪类动态创建进度条红***域，并通过animation改变padding-right值来实现其效果，在animation中，ease表示动画从低速开始，然后加快，最后变慢的速度曲线，除了ease，还有诸如linear、ease-in、ease-out、ease-in-out和贝塞尔曲线等等，它们所表示的是在整个完整动画中的每两个相邻的关键帧之间的速度变化状态，在上面的例子中，则是0%-20%之间，20%-40%之间等等，并不要理解成整个动画的状态，当然，如果你定义的是0%-100%（或者from-to）则可以理解成表示整个动画过程，整个速度曲线是平滑过渡的，视觉上十分流畅
在animation-timing-function中，有个比较特殊的属性，steps，它表示一个阶跃函数，可以为step-start、step-end、steps(1, end)三种方式
其中，step-start等同于steps(1, start)，step-end等同于steps(1, end)，steps([num], [type])第一个参数表示阶跃的次数（动画分几步完成），第二个参数有start和end两个值，start表示动画从一开始就跳到100%直到周期结束，end表示保持0%状态直到周期结束
注意，这里的阶跃次数指的是每两个关键帧之间的次数，比如0%-20%之间，20%-40%之间等等，不是整个动画状态
上述例子中，把ease改为steps(2, end)可以发现，动画在0%-20%的动画周期中，分割成了两次跳跃，比如这里的20%结束状态是padding-right:50%，则第一次跳跃为padding-right:25%，这里的跳跃是没有任何过渡效果的，直接显示改变后的状态，因此，也叫作阶跃函数
主要可以运用在一些sprits动画中，通过阶跃函数改变其background-position值，实现连贯的动画效果
投递顺丰集团等公司6个岗位 >