CSS 打字动画不适用于 Firefox答案

【问题标题】：CSS typing animation not working for FirefoxCSS 打字动画不适用于 Firefox
【发布时间】：2017-06-25 08:06:33
【问题描述】：

我今晚一直在尝试修复我的 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>

有人发现我的错误吗？

【问题讨论】：

除了div没有.css-typing这一事实之外？
错字...就像提到的，它适用于 chrome 所以

标签： html css firefox css-animations

【解决方案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; } 
    }

【讨论】：

嗯，这似乎仍然不起作用 =/ 我的 firefox 版本是最新的。
我在 Ubuntu 16.01 上的 Firefox 51 中对其进行了测试，并且成功了。你确定没有你忽略的东西吗？
我现在正在检查。小提琴代码对我有用，但我的代码在 Firefox 上似乎没有做任何事情。也许这是一个wordpress的东西，我不确定。试图弄清楚这一点。感谢您的帮助！
也许使用!important设置一些属性

【解决方案2】：

W3C 建议在@keyframes 中定义“from”和“to”以获得最佳浏览器支持。尝试将您的代码更改为：

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

【讨论】：