關鍵幀動畫僅在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> 

該動畫在Code Pen中可在Chrome中運行，但我無法在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 p 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;
 }