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