CODEWITHSUNDEEP
htmlcssfirefoxcss-animations
Chris Ha
Chris Ha

Reputation: 311

CSS typing animation not working for Firefox

I have been trying to fix my CSS type-writing animation for Firefox tonight - no success so far. The Chrome codes works tho. What am I missing guys? 

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

The div which has to be defined by this code looks like this:

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

Does anyone spot my mistake?

Upvotes: 0

Views: 513

Answers (2)

Dylan Stark
Dylan Stark

Reputation: 2395

W3C recommends for best browser support that a "from" and a "to" are both defined inside @keyframes. Try changing your code to this:

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

Upvotes: 0

yaakov
yaakov

Reputation: 4665

You need to set the to part of the @keyframes block, and you also need to set the width of the element: 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; } 
    }

Upvotes: 1

Related Questions