Question

我需要使用纯CSS实现无限跳出效果，所以我引用了http://localhost/keep/网站并最终做了this。

＆＃13;

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

＆＃13;

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

＆＃13;

现在，我唯一的问题是弹跳元素在开始弹跳之前需要更长时间的休息。如何通过使用 jQuery.animate 获得的反弹效果使其反弹顺畅？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 2

以下代码不使用关键帧中的百分比。因为你使用了百分比，所以动画不会花很长时间。

0％翻译0px
20％翻译0px
等

这个例子如何运作：

我们设置了ServiceProcessInstaller。这是动画属性的简写。
我们立即启动动画，因为我们在关键帧中使用animation和from。从is = 0％到is = 100％
我们现在可以通过设置动画时间来控制弹跳的速度：to 1s是动画持续的时间。

＆＃13;

animation: bounce 1s infinite alternate;

＆＃13;

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

＆＃13;

Answer 3

如果您已经在使用transform属性来定位元素（如我目前所处的位置），则还可以为上边距设置动画：

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

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

CSS平滑反弹动画

3 个答案: