Cross-Browser CSS3 Animazione keyframe Firefox

Question

Ho un semplice effetto "pulsante" sul pulsante di riproduzione (che è un tag di ancoraggio), utilizzando CSS3 e keyframe.

Mentre funziona perfettamente in Chrome e Safari, non sembra funzionare in Firefox. Qualcuno ha un'idea sul perché?

li > a { 

    -webkit-animation: pulsate 3s ease-in-out; 
    -moz-animation: pulsate 3s ease-in-out; 
    -o-animation: pulsate 3s ease-in-out; 
    animation: pulsate 3s ease-in-out; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 

@-webkit-keyframes pulsate { 
    0% { 
     -webkit-transform: scale(0.8, 0.8); 
     -moz-transform: scale(0.8, 0.8); 
     -o-transform: scale(0.8, 0.8); 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 

    50% { 
     -webkit-transform: scale(1, 1); 
     -moz-transform: scale(1, 1); 
     -o-transform: scale(1, 1); 
     transform: scale(1, 1); 
     opacity: 1.0; 
    } 

    100% { 
     -webkit-transform: scale(0.8, 0.8); 
     -moz-transform: scale(0.8, 0.8); 
     -o-transform: scale(0.8, 0.8); 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 

Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

è necessario includere le animazioni dei fotogrammi chiave specifiche per il browser con le loro trasformate specifiche del browser al loro interno

@-webkit-keyframes pulsate { 
    0% { 
     -webkit-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     -webkit-transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     -webkit-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-moz-keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-ms-keyframes pulsate { 
    0% { 
     -ms-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% 
     -ms-transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     -ms-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-o-keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 

Inoltre, è necessario aggiungere i -ms-animation equivalenti per ottenere il pieno supporto del browser.

---

In questi giorni, molti di questi possono essere lasciati fuori in sicurezza. Controlla this post per scoprire quali devono essere inclusi per supportare i browser di destinazione.