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

您需要设置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建议获得最佳浏览器支持，即在@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}
    }

CSS输入动画不适用于Firefox

2 个答案: