Firefoxで私のアニメーションが機能しないのはなぜですか？

Question

Chromeで完全に動作するコードがありますが、Firefoxでは動作しません。 自分のウェブサイトに自分のロゴイメージが欲しいです。コードはChromeで動作しますが、Firefoxで動作しない理由はわかりません。

.shine-me { 
    width:100%; /*Make sure the animation is over the whole element*/ 
    -webkit-animation-name: ShineAnimation; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47); 
    animation:ShineAnimation 5s infinite; 
    animation-timing-function: cubic-bezier(.12,.89,.98,.47); 
} 
@-webkit-keyframes ShineAnimation{ 
    from { 
     background-repeat:no-repeat; 
     background-image:-webkit-linear-gradient(
      top left, 
      rgba(255, 255, 255, 0.0) 0%, 
      rgba(255, 255, 255, 0.0) 45%, 
      rgba(255, 255, 255, 0.5) 48%, 
      rgba(255, 255, 255, 0.8) 50%, 
      rgba(255, 255, 255, 0.5) 52%, 
      rgba(255, 255, 255, 0.0) 57%, 
      rgba(255, 255, 255, 0.0) 100% 
     ); 
     background-position:-250px -250px; 
     background-size: 600px 600px 
    } 
    to { 
     background-repeat:no-repeat; 
     background-position:250px 250px; 
    } 
} 

@keyframes ShineAnimation{ 
    from { 
     background-repeat:no-repeat; 
     background-image:linear-gradient(
      top left, 
      rgba(255, 255, 255, 0.0) 0%, 
      rgba(255, 255, 255, 0.0) 45%, 
      rgba(255, 255, 255, 0.5) 48%, 
      rgba(255, 255, 255, 0.8) 50%, 
      rgba(255, 255, 255, 0.5) 52%, 
      rgba(255, 255, 255, 0.0) 57%, 
      rgba(255, 255, 255, 0.0) 100% 
     ); 
     background-position:-250px -250px; 
     background-size: 600px 600px 
    } 
    to { 
     background-repeat:no-repeat; 
     background-position:250px 250px; 
    } 
} 
p 
{ 
    background-color:#c0c0c0; 
    padding:15px; 
} 

Answer 1

また、CSSの次の行を追加する必要があります。

-moz-animation:ShineAnimation 5s infinite; 
 
    -moz-animation-timing-function: cubic-bezier(.12,.89,.98,.47); \t 
 

 

 
@-moz-keyframes ShineAnimation{ 
 
    from { 
 
     background-repeat:no-repeat; 
 
     background-image:-webkit-linear-gradient(
 
      top left, 
 
      rgba(255, 255, 255, 0.0) 0%, 
 
      rgba(255, 255, 255, 0.0) 45%, 
 
      rgba(255, 255, 255, 0.5) 48%, 
 
      rgba(255, 255, 255, 0.8) 50%, 
 
      rgba(255, 255, 255, 0.5) 52%, 
 
      rgba(255, 255, 255, 0.0) 57%, 
 
      rgba(255, 255, 255, 0.0) 100% 
 
     ); 
 
     background-position:-250px -250px; 
 
     background-size: 600px 600px 
 
    } 
 
    to { 
 
     background-repeat:no-repeat; 
 
     background-position:250px 250px; 
 
    } 
 
}

Answer 2

それは2つの理由でFirefoxで動作しません：

• あなたが使用しています@keyframesルール内の古いWebKit固有線形勾配構文新しい構文must have the to keyword before the sides（to top leftなど）。
• Firefoxは、WebKitを使用するブラウザとは異なり、background-imageを@keyframesに宣言することをサポートしていません。理由は私の答えhereに記載されています。 0%フレーム内に適用されたbackground-imageのプロパティをベースセレクタに移動し、background-positionだけをアニメートします。

.shine-me { 
 
    width: 100%; /*Make sure the animation is over the whole element*/ 
 
    background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%); 
 
    background-position: -250px -250px; 
 
    background-size: 600px 600px; 
 
    background-repeat: no-repeat; 
 
    -webkit-animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47); 
 
    animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47); 
 
} 
 
@-webkit-keyframes ShineAnimation { 
 
    from { 
 
    background-position: -250px -250px; 
 
    } 
 
    to { 
 
    background-position: 500px 0px; 
 
    } 
 
} 
 
@keyframes ShineAnimation { 
 
    from { 
 
    background-position: -250px -250px; 
 
    } 
 
    to { 
 
    background-position: 500px 0px; /* increase the X position as required */ 
 
    } 
 
} 
 
p { 
 
    background-color: #c0c0c0; 
 
    padding: 15px; 
 
}

<p class='shine-me'>Some text</p>