Question

我正试图在其左侧属性上设置div位置的动画。这个职位必须在所有期间一步一步地移动。

这是我的示例代码：

#my-div {
  position: relative;
  top: -1291px;
  left: 615px;
  animation: my-div-anim 20s infinite;
  animation-timing-function: step-start;
}

@keyframes my-div-anim {
  0% {left: 615px;}
  20% {left: 800px;}
  40% {left: 985px;}
  60% {left: 1170px;}
  100% {left: 1170px;}
}

但它不起作用。可能有什么不对？

Answer 1

您的代码在Chrome中有效（带有浏览器前缀）。我只是不确定它是否符合你的要求......

<强>步开始

此关键字表示计时功能步骤（1，开始）。运用这个计时功能，动画立即跳到结束状态 并保持在该位置直到动画结束。

Source

这意味着您的动画会直接跳到最后一帧并错过所有中间位置。你确定这是你想要的效果吗？

Here is a demo showing that your animation is working。查看文本如何立即改变颜色。

将计时功能更改为ease并且位置动画有效。 Demo

动画位置一步一步

1 个答案: