CSS动画重复,当我不想要它

时间:2013-08-27 04:10:07

标签: css webkit css-animations webkit-transform

我这里有一小段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。我该怎么做呢?提前谢谢!

1 个答案:

答案 0 :(得分:4)

fill-mode将在动画结束时停止动画状态 添加此-webkit-animation-fill-mode: forwards;