1

我正在尝试在其左侧属性上设置 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;}
}

但它不起作用。有什么问题？

4

1 回答 1

0

您的代码在 Chrome 中运行（带有浏览器前缀）。我只是不确定它是否符合您的意图...

一步启动

此关键字表示计时功能步骤（1，开始）。使用这个计时功能，动画会立即跳转到结束状态 并停留在那个位置直到动画结束。

资源

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

这是一个演示，显示您的动画正在运行。查看文本如何立即改变颜色。

将计时功能更改为ease，位置动画生效。演示

于 2013-10-16T14:27:06.650 回答