當動畫停止播放時，DIV會一直返回到相同的位置？

Question

動畫停止播放後，Div再次出現，你如何阻止div回到原來的位置？

#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代碼：

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

Answer 1

您可以添加，animation-fill-mode: forwards;到#wrapper .section.section-left和#wrapper .section.section-right

Codepen example