我需要用纯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
设置的方式如下:
- 在 0%(即,在 0s 或动画开始处)-
translate
Y 轴上的 0px。 - 在 20%(即,在 0.5 秒的动画)-
translate
Y 轴上的 0px。 - 在 40%(即在动画的 1 秒处)- 在 Y 轴上
平移
0px。 - 在 50%(即在 1.25 秒的动画中)-
translate
在 Y 轴上 5px。这导致逐渐向上移动。 - 在 60%(即在 1.5 秒的动画中)-
translate
在 Y 轴上 0px。这导致逐渐向下移动。 - 在 80%(即在动画的 2 秒处)- 在 Y 轴上
平移
0px。 - 在 100%(即在 2.5 秒或动画结束时)- 在 Y 轴上
平移
0px。
关于css - 为什么我的弹跳动画如此跳跃而不是流畅?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32306089/