CSS 打字动画不适用于 Firefox

Posted 2023-03-06

【中文标题】CSS 打字动画不适用于 Firefox

【英文标题】：CSS typing animation not working for 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 所以

【参考方案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