Css bounce animation not working, Why? - html

Question

I am creating scroll top icon just like demo: http://demo.themeum.com/html/eshopper/.
Here in demo scroll top icon is bouncing infinite. I want to create this one for my page also.
But i can't figure out why my effort not working? 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

you've missed out the declare keyframe animation in your css, update your css with the below
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