我正在创建滚动顶部图标，就像演示：http : //demo.themeum.com/html/eshopper/。在演示中，滚动顶部图标无限弹跳。我也想为我的页面创建一个。
但是我不知道为什么我的努力没有奏效？小提琴
CSS：
a#scrollUp {
bottom: 0px;
right: 10px;
padding: 5px 10px;
background: #FE980F;
color: #FFF;
-webkit-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}
您错过了css中的声明关键帧动画，请使用以下内容更新css
的CSS
a#scrollUp {
animation: 2s ease 0s normal none infinite bounce;
background: none repeat scroll 0 0 #fe980f;
bottom: 0;
color: #fff;
padding: 5px 10px;
right: 10px;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.animated.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句