Keyframe Animation only working in Internet Explorer - html

Question

I am trying to add this scroll animation script to my website: http://codepen.io/zutrinken/pen/yhqEA
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: absolute;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
color: #000;
}
#scrolldown > p {
text-transform: uppercase;
text-indent: 3px;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: absolute;
width: 26px;
}
.mouse span {
display: block;
font-size: 1.5em;
margin: 6px auto;
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
<div id="scrolldown">
<p>scroll</p>
<div class="mouse">
<span><p>↓</p></span>
</div>
</div>
The animation works in Chrome while in Code Pen but i can not get it to work outside of Code Pen. How Can I get this script to work with other browsers?
http://rapidevac.biz/tapreport/ This is my website that i added the script to. Like i said, it works with IE 9 but not with other browsers.
Thanks guys for reviewing my question!

Answer 1

Add this after your #keyframes scroll to se the animation in all browsers
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}

Answer 2

Your transitions are not cross-browser friendly.
Change your #scrolldown p css to this:
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}