Why my animation is not working? CSS only

Question

My HTML file:

 * {
        margin: 0;
    }
    .box {
        width: 0px;
        height: 0%;
        background: green;
        border: 1px solid black;
        animation-name: grow;
        animation-duration: 2s;
    }
    
    @keyframes grow {
        from {width: 0px; height: 0%; background: red;}
        to {width: 340px; height: 100%; background: green;}
    }

<div class="box"></div>

The idea is that my HTML file will have a side bar on the left side of the window that stretches from the left at the beginning. And it should stay that way, I mean, the "div".class should stay after stretching, not disappear.

Chiara Ani · Accepted Answer · 2020-08-05T17:54:47.297

1

Add position: absolute; to .box. Your animation does not work because body is 0 height.

* {
        margin: 0;
    }
    .box {
        width: 0px;
        height: 0%;
        background: green;
        border: 1px solid black;
        animation-name: grow;
        animation-duration: 2s;
        position: absolute;
    }
    
    @keyframes grow {
        from {width: 0px; height: 0%; background: red;}
        to {width: 340px; height: 100%; background: green;}
    }

<div class="box"></div>

edited Aug 05 '20 at 17:54

answered Aug 05 '20 at 14:11

Chiara Ani

918
7
25

thank you very much. One last question. How can I make it stay? I mean, after it stretches/grows, it doesn't stay this way, it disappears. – coder online Aug 05 '20 at 17:12
thank you. I understood!!! – coder online Aug 05 '20 at 17:29
1

Just add final width and height to `.box`. – Chiara Ani Aug 05 '20 at 17:56

Why my animation is not working? CSS only

1 Answers1