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彈跳動畫無效，爲什麼？

回答

相關問題