CODEWITHSUNDEEP
htmlcssanimation
Manwal
Manwal

Reputation: 23836

Css bounce animation not working, Why?

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

Upvotes: 0

Views: 3203

Answers (1)

Aru
Aru

Reputation: 1870

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

Upvotes: 3

Related Questions