DIV keeps returning back to the same position when animation stop playing?

Question

The Div reappeared after the animation stops playing, how do you stop the div from returning to the original place?

    #wrapper {
    background-color: #999;
    position: fixed;
    height: 100%;
    width: 100%;
}
#wrapper .section{
    position: absolute;
    top: 0;
    width: 51%;
    height: 100%;
    background: #222222;
}
#wrapper .section.section-left{
    left:0;
    animation: move 1.5s 1;

}
#wrapper .section.section-right{
    right:0;
    animation: move 1.5s 1;

}
@keyframes move{
     0%   {width: 51%;}
    100% {width:0%;}
}

HTML code:

<div id="wrapper">
<div class="section section-left"></div>
<div class="section section-right"></div>
</div>

Ah, thanks for the link! – Josephine Nobel Mar 28 '16 at 14:32 — Josephine Nobel, Mar 28 '16 at 14:32

score 0 · Answer 1 · answered Mar 28 '16 at 14:31

0

You can add, animation-fill-mode: forwards; to #wrapper .section.section-left and #wrapper .section.section-right

Codepen example

answered Mar 28 '16 at 14:31

krunos

163
1
9

DIV keeps returning back to the same position when animation stop playing?

1 Answers1