クロスブラウザCSS3キーフレームアニメーションFirefox

Question

CSS3とキーフレームを使用して、再生ボタン（アンカータグ）に簡単な「脈動」効果があります。

ChromeとSafariでは問題なく動作しますが、Firefoxでは動作していないようです。なぜ誰かがアイデアを持っていますか？

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

ご協力いただければ幸いです。ありがとう！

Answer 1

あなたはまた、あなたがフルブラウザのサポートを得るために-ms-animation同等物を追加する必要があります

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

それらの中に彼らのブラウザ固有の変換とブラウザ固有のキーフレームアニメーションを含める必要があります。

---

最近、これらの多くは安全に除外できます。 this postをチェックして、ターゲットブラウザをサポートするために含める必要があるものを確認してください。