CSS animation repeating when I don't want it to

Question

I have a snippet of CSS here,

    @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;
    }

Whenever I hover over the img, the bounce animation plays like it should, but when I remove my mouse from the img, the slidein animation plays again. I only want slidein to play on page load. How would I go about doing that? Thanks in advance!

Answer 1

fill-mode will stop the animation state at the end of the animation.
Add this -webkit-animation-fill-mode: forwards;