設置滑入後文本的位置

Question

我有下面的代碼讓文本滑入，但在滑動結束後文本移動到左側。當幻燈片結束時，我會如何讓文本保持在原來的位置？

<style> 
 
    div.slide-left { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
    div.slide-left p { 
 
    animation: slide-left 5s; 
 
    font-size: 300%; 
 
    color: #000; 
 
    position: absolute; 
 
    top: 50px; 
 
    } 
 
    @keyframes slide-left { 
 
    from { 
 
     margin-left: 100%; 
 
     width: 300%; 
 
    } 
 
    to { 
 
     margin-left: 50%; 
 
     width: 100%; 
 
    } 
 
    } 
 
</style> 
 
<div class="slide-left"> 
 
    <p>hello</p> 
 
</div>

Answer 1

您需要使用animation-fill-mode: forwards保留最後的動畫狀態。由於沒有指定動畫填充模式，因此它使用類名稱的默認屬性，即重置/跳轉到動畫完成後指定的頂部值。

<style> 
 
    div.slide-left { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
    div.slide-left p { 
 
    animation: slide-left 5s; 
 
    font-size: 300%; 
 
    color: #000; 
 
    position: absolute; 
 
    top: 50px; 
 
    animation-fill-mode: forwards; 
 
    } 
 
    @keyframes slide-left { 
 
    from { 
 
     margin-left: 100%; 
 
     width: 300%; 
 
    } 
 
    to { 
 
     margin-left: 50%; 
 
     width: 100%; 
 
    } 
 
    } 
 
</style> 
 
<div class="slide-left"> 
 
    <p>hello</p> 
 
</div>