当动画停止播放时,DIV会一直返回到相同的位置?

问题描述:

动画停止播放后,Div再次出现,你如何阻止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> 
+0

啊,感谢您的链接! –

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

Codepen example