Настраиваемая анимация CSS, не работающая для Firefox

Question

Я пытаюсь исправить мою анимацию для написания стилей CSS для Firefox сегодня - пока нет успеха. Коды 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

Вы должны установить to часть @keyframes блока, а также необходимо установить ширину элемента: 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 рекомендует для лучшей поддержки браузера, что «от» и " to "оба определены внутри @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} 
    }