Question

div向左移动300px后，它应该停止。如果我取出infinite它会回到0并保持在那里。我希望它保持300px然后不再向后移动。 animation-iteration-count: 1;无效。

HTML：

<div id="div1">linear</div>

的CSS：

div {
  width: 100px;
  height: 50px;
  background-color: pink;
  position: relative;
  -webkit-animation: mymove 5s infinite; 
}


@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}

Answer 1

您需要将animation-fill-mode property设置为forwards：

-webkit-animation: mymove 5s forwards;
animation: mymove 5s forwards;

此属性确定在执行动画之前/之后如何设置元素的样式。将值设置为forwards将强制元素保留最后一个关键帧设置的值（在本例中为left: 300px）。

基本示例：

div {
  width: 100px;
  height: 50px;
  background-color: pink;
  position: relative;
  -webkit-animation: mymove 5s forwards;
  animation: mymove 5s forwards;
}

@-webkit-keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 300px;
  }
}
@keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 300px;
  }
}

<div></div>

Answer 2

由于animation-fill-mode仍然是实验性的，你可以这样做。

div {
  width: 100px;
  height: 50px;
  background-color: pink;
  position: relative;
  left: 300px;
  animation: mymove 5s; 
}


@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}

<div id="div1">linear</div>

如何让这个div在移动后保持一个位置？

2 个答案: