Css弹跳动画无效，为什么？

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

但我想不通为什么我的努力不工作？ 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; 
}

来源

2014-10-10 Manwal

看不到任何动画k在小提琴中链接的CSS文件中命名弹跳的眼框定义。我想你忘了在你的小提琴中加入animate.css。 – Harry 2014-10-10 04:37:28

@Harry如何从演示网站找到关键帧代码？ – Manwal 2014-10-10 04:39:23

它在animate.css文件队友中存在。 '@keyframes bounce {...}' – Harry 2014-10-10 04:39:57

你已经在你的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

来源

2014-10-10 04:43:51 Aru

Css弹跳动画无效，为什么？

回答

相关问题