Question

我正在创建滚动顶部图标，就像demo：http://demo.themeum.com/html/eshopper/一样。这里的演示滚动顶部图标弹跳无限。我也想为我的页面创建这个。

但我无法弄清楚为什么我的努力不起作用？ Fiddle

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

Answer 1

您错过了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;
}

Fiddle Demo

Css弹跳动画不起作用，为什么？

1 个答案: