2

ここに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;
    }

画像の上にカーソルを置くと、バウンス アニメーションが正常に再生されますが、画像からマウスを離すと、スライドイン アニメーションが再び再生されます。ページの読み込み時にのみスライドインを再生したい。どうすればそれを行うことができますか？前もって感謝します！

4

1 に答える 1

5

fill-mode は、アニメーションの最後でアニメーション状態を停止します。
これを追加 -webkit-animation-fill-mode: forwards;

于 2013-08-27T04:13:12.437 に答える