css动画里的steps()用法详解

这周继续介绍给大家关于css相关的技术文章，关于css动画的steps。

steps介绍

steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数——第一个参数是一个正值，指定我们希望动画分割的段数。

Steps(，)
第二个参数定义了这个要点在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为”end”。方向为”start”表示一个左–持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。

方向为”end”表示一个右–持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每个选择本质上从一个不同的面移动这个元素并且将产生一个不同的位置在这个相同的动画里。

示例图如下：

填充模式和迭代次数的影响

在我们开始前，明白一个不同的填充模式或者迭代次数将会怎样影响steps()是非常重要的，例如”forwards”或者”infinite”的使用。如果我们有两辆车，使用相同的动画持续时间、相同的steps()值，但是其中一个设置（infinite），另一个填充（forward）,终点的这两辆汽车看起来非常不同，即使他们从相同的轴点出发。

“forwards”的命令使这个动画元素保持着@keyframes里最后一个动画样式。在动画里将它与steps()联系使这个动作出现，好像初始的静止状态没有计算到总的步数里。当它是”end”，好像这个车行驶了额外的步数超出了你的steps()的声明，取决于你怎样看待它。

下面是演示infinite VS forwards车：

接下来我们看一个栗子来理解吧：
闹钟实例：
一个应用了steps()的闹钟演示。我们需要闹钟的指针旋转起来，但是不是圆滑连续的运动。使用steps()将允许我们模仿真实的闹钟的运动。

核心代码：

.hour {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4px;
  background: #f8b65b;
  transform-origin: top;
  -webkit-transform-origin: top;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  border-radius: 50px;
  width: 8px;
  height: 35px;
  z-index: 5;
}
.minute {
  position: absolute;
  top: 5px;
  left: 55px;
  margin-left: -4px;
  background: #f8b65b;
  border-radius: 50px;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  width: 8px;
  height: 50px;
  z-index: 3;
  animation: tick-tock 3600s steps(60, end) infinite;
  -webkit-animation: tick-tock 3600s steps(60, end) infinite;
}
.second {
  position: absolute;
  top: 5px;
  left: 56px;
  margin-left: -2px;
  background: #333333;
  border-radius: 50px;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  width: 2px;
  height: 50px;
  z-index: 5;
  animation: tick-tock 60s steps(60, end) infinite;
  -webkit-animation: tick-tock 60s steps(60 ,end) infinite;
}
@keyframes tick-tock {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes tick-tock {
  to {
    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

steps介绍
填充模式和迭代次数的影响

steps介绍

填充模式和迭代次数的影响

FEATURED TAGS