Keyframe Animation работает только в Internet Explorer

Question

Я пытаюсь добавить прокрутки анимации скрипт на мой сайт: 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>&darr;</p></span> 
 
    </div> 
 
</div>

анимация работает в Chrome в то время как в Code Pen, но я не могу заставить его работать вне Code Pen. Как я могу заставить этот скрипт работать с другими браузерами?

http://rapidevac.biz/tapreport/ Это мой сайт, на который я добавил скрипт. Как я уже сказал, он работает с IE 9, но не с другими браузерами.

Спасибо, ребята, за отзыв моего вопроса!

Answer 1

Добавьте это после того, как ваши @keyframes выделите себе анимацию во всех браузерах

@-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

Ваши переходы не поддерживают межсерверный браузер.

Изменить #scrolldown р CSS это:

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