CSS 平滑反弹动画

CSS smooth bounce animation

提问by Abhi

I needed to implement infinite bounce effect using pure CSS, so I referred thissite and ended up doing this.

我需要使用纯 CSS 实现无限弹跳效果，所以我参考了这个网站并最终这样做了。

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

#animated-example {
    width: 20px;
    height: 20px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 50%;
}

hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
}

<div id="animated-example" class="animated bounce"></div>
<hr>

Now, my only problem is the bouncing element takes a longer rest before it starts bouncing again. How can I make it bounce smoothly just like the bounce effect we get by using jQuery.animate?

现在，我唯一的问题是弹跳元素在再次开始弹跳之前需要更长的休息时间。我怎样才能让它像我们使用的反弹效果一样顺利反弹jQuery.animate？

回答by Harry

The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-durationto suit your needs.

中间的长时间休息是由于您的关键帧设置。您当前的关键帧规则意味着实际反弹仅发生在动画持续时间的 40% - 60% 之间（即动画的 1s - 1.5s 标记之间）。删除这些规则，甚至可能减少animation-duration以满足您的需求。

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
#animated-example {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}
hr {
  position: relative;
  top: 92px;
  left: -300px;
  width: 200px;
}

<div id="animated-example" class="animated bounce"></div>
<hr>

---

---

Here is how your original keyframesettings would be interpreted by the browser:

以下是keyframe浏览器如何解释您的原始设置：

• At 0%(that is, at 0s or start of animation) - translateby 0px in Y axis.
• At 20%(that is, at 0.5s of animation) - translateby 0px in Y axis.
• At 40%(that is, at 1s of animation) - translateby 0px in Y axis.
• At 50%(that is, at 1.25s of animation) - translateby 5px in Y axis. This results in a gradual upward movement.
• At 60%(that is, at 1.5s of animation) - translateby 0px in Y axis. This results in a gradual downward movement.
• At 80%(that is, at 2s of animation) - translateby 0px in Y axis.
• At 100%(that is, at 2.5s or end of animation) - translateby 0px in Y axis.

• 在 0%（即在 0s 或动画开始时） -translate在 Y 轴上增加 0px。
• 在 20%（即动画的 0.5 秒）处 -translate在 Y 轴上增加 0px。
• 在 40%（即动画的 1translate秒）处 -在 Y 轴上增加 0px。
• 在 50%（即动画 1.25 秒）时 -translate在 Y 轴上增加 5px。这导致逐渐向上运动。
• 在 60%（即动画的 1.5秒）处 -translate在 Y 轴上增加 0px。这导致逐渐向下移动。
• 在 80%（即动画的 2 秒）处 -translate在 Y 轴上增加 0px。
• 在 100%（即在 2.5 秒或动画结束时） -translate在 Y 轴上增加 0px。

回答by Persijn

Here is code not using the percentage in the keyframes. Because you used percentages the animation does nothing a long time.

这是不使用关键帧中的百分比的代码。因为您使用了百分比，所以动画很长一段时间都不做任何事情。

• 0% translate 0px
• 20% translate 0px
• etc.

• 0% 翻译 0px
• 20% 翻译 0px
• 等等。

How does this example work:

这个例子是如何工作的：

1. We set an animation. This is a short hand for animation properties.
2. We immediately start the animation since we use fromand toin the keyframes. from is = 0% and to is = 100%
3. We can now control how fast it will bounce by setting the animation time: animation: bounce 1s infinite alternate;the 1s is how long the animation will last.

1. 我们设置了一个animation. 这是动画属性的简写。
2. 我们立即开始动画，因为我们在关键帧中使用from和to。从是 = 0% 到是 = 100%
3. 我们现在可以通过设置动画时间来控制它的反弹速度：animation: bounce 1s infinite alternate;1s 是动画持续的时间。

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

<div class="ball"></div>

回答by GerritElbrink

In case you're already using the transform property for positioning your element (as I currently am), you can also animate the top margin:

如果您已经在使用 transform 属性来定位您的元素（就像我现在一样），您还可以为顶部边距设置动画：

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -15px;
  }
}