我不想重复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上移开鼠标时，slidein动画会再次播放。我只希望Slidein在页面加载时播放。我将如何去做？提前致谢！

Answer 1

fill-mode将在动画结束时停止动画状态。
加上这个 -webkit-animation-fill-mode: forwards;