为什么我的反弹动画如此跳跃而不是平滑？

问题描述

我需要用纯css实现无限退回效果，所以我引用了this站点，最后做了this。

.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>

现在，我唯一的问题是弹跳元素需要更长的休息时间才能再次开始弹跳。如何才能使它像我们使用jQuery.animate获得的反弹效果一样平稳反弹？

推荐答案

中间较长的休息时间取决于您的关键帧设置。您当前的关键帧规则意味着实际反弹仅发生在动画持续时间的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>

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