Css 我如何使这个div在移动后保持在一个位置？

div向左移动300px后，它应该停止。如果我把

无限

取出来，它会回到0并保持不变。我希望它保持在左边300px，然后不向后移动<代码>动画迭代次数：1没有帮助

html:

您需要将设置为“转发”：

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

此属性确定在执行动画之前/之后如何设置元素的样式。将值设置为“向前”将强制元素保留上一个关键帧设置的值（在本例中，

left:300px

）

基本示例：

div{
宽度：100px；
高度：50px；
背景颜色：粉红色；
位置：相对位置；
-webkit动画：mymove 5s向前移动；
动画：mymove 5s向前移动；
}
@-webkit关键帧mymove{
从{
左：0px；
}
到{
左：300px；
}
}
@关键帧mymove{
从{
左：0px；
}
到{
左：300px；
}
}

---

由于

动画填充模式仍处于试验阶段，您可以这样做


div{
宽度：100px；
高度：50px；
背景颜色：粉红色；
位置：相对位置；
左：300px；
动画：mymove 5s；
}
@-webkit关键帧mymove{
从{左：0px；}
到{左：300px；}
}
linear
和一个指向规范的链接。@JoshCrozier谢谢，我知道，我也知道有些人不会在生产环境中使用实验性的东西，所以我认为这可能是一个不错的选择。谢谢，我不知道这是实验性的。这是一种进化，我把你的两个答案混合在一起，它在某一点上对我正在做的其他事情起了作用。
div {
  width: 100px;
  height: 50px;
  background-color: pink;
  position: relative;
  -webkit-animation: mymove 5s infinite; 
}


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

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