CSS鍵入動畫不適用於Firefox

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