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;