使用CSS的非光滑关键帧动画
使用CSS的非光滑关键帧动画
提问于 2015-09-10 17:02:48
我有一个关键帧动画在我的网站，它是非常基本的，但它似乎运行了一点‘故障’。
我理解这可能是由于许多因素造成的，但由于我对CSS关键框架没有丰富的经验，我希望有人愿意看我的代码，并确定我是否做得对？
这是我的代码：
div {display:block;position:absolute;left:0;bottom:20px;right:0;text-align:center;z-index:2;}
a {display:inline-block;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:2px;color:#000;text-decoration:none;text-transform:uppercase;}
a:after {content:'\f107';display:block;font-family:FontAwesome;font-size:30px;margin:5px auto 0;animation:bounce 2s infinite;}
/* Scroll down bounce */
@keyframes bounce {
0%, 20%, 80%, 100% {transform: translateY(0);}
50% {transform: translateY(-10px);}
}<div>
<a>Scroll Down</a>
</div>
奖金
理想的情况下，我实际上希望动画反弹，以突出更多，但我未能使这个工作。如果有人能找到一个方法来修正这一点，以应用更多的“反弹”效果，我将非常感激.
Stack Overflow用户
发布于 2015-09-11 09:29:44
这仅仅是因为animation-duration太高2s和转换距离低，要么降低duration，要么增加transformY - 演示。
此外，您还可以通过调整不同的transform值来使动画感觉像弹跳一样，例如-
@keyframes bounce {
50% {transform: translateY(0);}
0%, 25%, 75%, 100% {transform: translateY(-10px);}
}小提琴演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32507783
复制相关文章
相似问题
腾讯云开发者
