html - 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 如下所示:

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

有人发现我的错误吗？

Answer 1

需要设置@keyframes block 的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; } 
    }