Question

此代码接球并将其向右移动并再向后移动。我怎样才能让它向右移动并留在那里？

你可以在那里摆弄一个实时版本的输出。

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代码表示“无限”，当我删除它时，它会将球向右移动，然后再回到原来的位置。我希望它向右移动，然后留在那里。

Answer 1

你走了：

 animation: move 3s ease forwards;

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

您可以在此处阅读animation-fill-mode属性：
https://drafts.csswg.org/css-animations-1/#animation-fill-mode

前锋 - 动画结束后（由动画迭代计数确定），动画将应用动画结束时的属性值。

Answer 2

将infinite替换为forwards，并将from和to添加到@keyframes

根据需要调整top，left值。

见下文：

＆＃13;

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;
  }
}

＆＃13;

<h1>Animate with Top/Left</h1>

<div id="animate"></div>

＆＃13;

Answer 3

您正在寻找：

animation-fill-mode: forwards;

将CSS div设置为固定位置

3 个答案: