CSS的時候，我不希望它

Question

我這裏有CSS的動畫片段重複，

@keyframes slidein { 
    0% { 
     transform: translateY(30px); 
     opacity: 0; 
    } 
    70% { 
     transform: translateY(-5px); 
     opacity: 0.25; 
    } 
    100% { 
     transform: translateY(0px); 
     opacity: 0.25; 
    } 
    } 

    @-webkit-keyframes slidein { 
    0% { 
     -webkit-transform: translateY(30px); 
     opacity: 0; 
    } 
    70% { 
     -webkit-transform: translateY(-5px); 
     opacity: 0.25; 
    } 
    100% { 
     -webkit-transform: translateY(0px); 
     opacity: 0.25; 
    } 
    } 

    @keyframes bounce { 
    0% { 
     transform: translateY(0px); 
    } 
    100% { 
     transform: translateY(-5px); 
     opacity: 1; 
    } 
    } 

    @-webkit-keyframes bounce { 
    0% { 
     -webkit-transform: translateY(0px); 
    } 
    100% { 
     -webkit-transform: translateY(-5px); 
     opacity: 1; 
    } 
    } 

    .icons img { 
    display: inline-block; 

    width: 32px; 
    height: 32px; 

    padding: 10 10 10 10; 
    margin: 10 10 10 10; 

    opacity: 0.5; 

    transition-duration: 0.5s; 

    animation: slidein .2s linear 0s 1 normal forwards; 
    -webkit-animation: slidein .2s linear 0s 1 normal forwards; 
    } 

    .icons img:hover { 
     animation: bounce .2s linear 0s 1 normal forwards; 
     -webkit-animation: bounce .2s linear 0s 1 normal forwards; 
    } 

每當我將鼠標懸停在IMG，反彈播放動畫像它應該，但如果我刪除了我的鼠標從img開始，滑動動畫再次播放。我只想要在頁面加載時播放幻燈片。我會怎麼做呢？提前致謝！

Answer 1

填充模式將在動畫結束時停止動畫狀態。
加上這個-webkit-animation-fill-mode: forwards;