CSS平滑弹跳动画 [英] CSS smooth bounce animation
问题描述
我需要使用纯CSS实现无限弹跳效果,因此我引用了此网站并最终做了此.
I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing 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
所获得的弹跳效果一样,如何使其平滑弹跳?
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
?
推荐答案
之间的长时间休息归因于关键帧设置.您当前的关键帧规则意味着实际的反弹仅发生在动画持续时间的40%-60%之间(即动画的1s-1.5s标记之间).删除这些规则,甚至减少animation-duration
以适合您的需求.
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-duration
to suit your needs.
.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
设置:
Here is how your original keyframe
settings would be interpreted by the browser:
- 在0%处(即在0s或动画开始时)-
translate
在Y轴上按0px. - 在20%处(即在动画的0.5s处)-
translate
在Y轴上按0px. - 达到40%(即动画1s时)-
translate
沿Y轴倾斜0像素. - 50%(即动画1.25秒)-
translate
在Y轴上缩小5像素.这导致逐渐的向上运动. - 达到60%(即动画1.5秒)-
translate
在Y轴上按0px.这导致逐渐的向下运动. - 80%(即动画2秒)-
translate
在Y轴上按0px. - 在100%处(即在2.5秒或动画结束时)-
translate
在Y轴上按0px.
- At 0% (that is, at 0s or start of animation) -
translate
by 0px in Y axis. - At 20% (that is, at 0.5s of animation) -
translate
by 0px in Y axis. - At 40% (that is, at 1s of animation) -
translate
by 0px in Y axis. - At 50% (that is, at 1.25s of animation) -
translate
by 5px in Y axis. This results in a gradual upward movement. - At 60% (that is, at 1.5s of animation) -
translate
by 0px in Y axis. This results in a gradual downward movement. - At 80% (that is, at 2s of animation) -
translate
by 0px in Y axis. - At 100% (that is, at 2.5s or end of animation) -
translate
by 0px in Y axis.
这篇关于CSS平滑弹跳动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!