将CSS div动画定位到固定位置

Question

这段代码将球移动到右边，再移回来。如何使它保持在右边呢？你可以在此处调整输出的实时版本。 http://codepen.io/chriscoyier/pen/pBCax

body {
padding: 30px;
}

#animate {
position: absolute;
top: 100px;
left: 30px;
 width: 100px;
 height: 100px;
 border-radius: 50%;
background: red;

animation: move 3s ease infinite;
 }

@keyframes move {
  50% {
 top: 200px;
 left: 130px;
 }
}

这段CSS代码中有一个属性值为“infinite”，如果将它删除的话，会让小球向右移动一次，然后再回到原来的位置。我希望能让小球向右移动并停留在那里。

- McMonty

---

当我移除无限循环时，球会向右浮动，然后回到原来的位置。我希望它只向右浮动一次并停在那里，更新前进。 - McMonty

我明白了...我添加了一个更完整的答案。 - blurfus

Answer 1

将infinite替换为forwards，并在您的@keyframes中添加from和to。

根据需要调整top和left值。

参见下面：

body {
  padding: 30px;
}
#animate {
  position: absolute;
  top: 100px;
  left: 30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  animation: move 3s ease forwards;
}
@keyframes move {
  from {
    top: 0px;
    left: 10px;
  }
  to {
    top: 200px;
    left: 130px;
  }
}

<h1>Animate with Top/Left</h1>

<div id="animate"></div>

- blurfus

Answer 2

给你：

 animation: move 3s ease forwards;

http://codepen.io/anon/pen/yebvZx

你可以在这里阅读有关 animation-fill-mode 属性的内容：
https://drafts.csswg.org/css-animations-1/#animation-fill-mode

forwards - 在动画结束后（由其 animation-iteration-count 确定），动画将应用于动画结束时的属性值。

- Chuck Le Butt

---

@icebear 好的。如果我的回答有帮助，请不要忘记点赞并接受它 :) - Chuck Le Butt

@icebear :-/ 为什么你选择了ochi的答案而不是我的？我先回答的，而他的答案增加了一个不必要的步骤。哎，算了 :( - Chuck Le Butt

Answer 3

您正在寻找的是：

animation-fill-mode: forwards;

- Captain Quirk