Animasyon neden Firefox'ta çalışmıyor?

Question

Chrome'da mükemmel bir şekilde çalışan bazı kodlarım var ancak Firefox'ta çalışmaz Logo görselimin web sitemde olmasını istiyorum. Kod, Chrome'da çalışır ancak neden Firefox'ta çalışmadığını bilmiyorum.

.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

Ayrıca css aşağıdakileri ekleyin gerekir:

-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

Bu iki sebepten dolayı Firefox'ta çalışmıyor:

• kullanıyorsunuz @keyframes kuralındaki eski WebKit'e özgü doğrusal degrade sözdizimi. Yeni sözdizimi must have the to keyword before the sides (to top left gibi).
• Firefox, WebKit kullanan tarayıcılardan farklı olarak @keyframes içinde background-image bildirimini desteklemez. Nedeni benim cevabımda here açıklanmaktadır. 0% çerçeve içinde uygulanan background-image özelliklerini temel seçiciye taşıyın ve yalnızca background-position'u hareketlendirin.

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