css - 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;