CSS-Typ-Animation funktioniert nicht für Firefox

Question

Ich habe versucht, meine CSS-Typ-Animation für Firefox heute Abend zu reparieren - bisher keinen Erfolg. Die Chrome-Codes funktionieren auch. Was vermisse ich Jungs?

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

Die div, die durch diesen Code definiert werden wie folgt aussieht:

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

Hat mein Fehler jemand vor Ort?

Answer 1

Sie müssen den to Teil des @keyframes Blockes setzen, und Sie müssen auch die Breite des Elements einzustellen: 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 empfiehlt für die beste Browser-Unterstützung, dass ein „von“ und einem " bis "sind beide innerhalb @keyframes definiert. Versuchen Sie, Ihren Code zu ändern:

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