FirefoxのCSSタイピングアニメーションが機能しない

Question

今夜はFirefox用にCSSタイプのアニメーションを修正しようとしています。 Chromeコードが動作します。私は何を失っているのですか？

.css-typing 
{ 
    width: 680px; 
    white-space: nowrap; 
    overflow: hidden; 
    -webkit-animation: type 3s steps(50, end); 
    animation: type 3s steps(55, end); 
    -o-animation: type 5s steps(50, end); 
    -moz-animation: type 3s steps(55, end); 
    } 


@keyframes type 
    { 
     from { width: 0; } 
    } 

@-moz-keyframes type 
    { 
     from { width: 0; } 
    } 

@-webkit-keyframes type 
    { 
     from { width: 0; } 
    } 

このコードで定義する必要がありますdiv要素は次のようになります。

<div class='css-typing'>This text will pop up using an typewriting effect</div> 

誰もが私の間違いを見つけていますか？

Answer 1

あなたは@keyframesブロックのto一部を設定する必要があります。また、要素の幅を設定する必要があります：https://jsfiddle.net/yak613/vtdyuju4/

.css-typing { 
    width: 360px; 
    white-space: nowrap; 
    overflow: hidden; 
    -webkit-animation: type 3s steps(50, end); 
    animation: type 3s steps(55, end); 
    -o-animation: type 5s steps(50, end); 
    -moz-animation: type 3s steps(55, end); 
} 


@keyframes type 
    { 
     from { width: 0; } 
     to { width: 360px; } 
    } 

@-moz-keyframes type 
    { 
     from { width: 0; } 
     to { width: 360px; } 
    } 

@-webkit-keyframes type 
    { 
     from { width: 0; } 
     to { width: 360px; } 
    } 

Answer 2

W3Cが最高のブラウザのサポートのために推奨していますが、「から」とその " 〜 "は両方とも内に定義されています@keyframes。コードを次のように変更してみてください：

.css-typing 
{ 
    width: 680px; 
    white-space: nowrap; 
    overflow: hidden; 
    -webkit-animation: type 3s steps(50, end); 
    animation: type 3s steps(55, end); 
    -o-animation: type 5s steps(50, end); 
    -moz-animation: type 3s steps(55, end); 
    } 


@keyframes type 
    { 
     from { width: 0; }, 
     to {width:680px} 
    } 

@-moz-keyframes type 
    { 
     from { width: 0; }, 
     to {width:680px} 
    } 

@-webkit-keyframes type 
    { 
     from { width: 0; } 
     to {width:680px} 
    }