Question

我已经创建了一个由css翻译的动画，现在我想每5秒播放/停止这个动画。我怎样才能做到这一点？这是我要翻译的信息框，我希望当我更改此框时，背景也会改变。这是我的css：

.relative-content {
    width: 100%;
    height: 100%;
    position: relative;
}
.shw-intro {
    width: 250px;
    height: 150px;
    background: #77941C;
    position: absolute;
    top: 55px;
    left: 75px;
    animation: shwA 1s ease-in-out;
    -webkit-animation: shwA 1s ease-in-out;
    animation-play-state: running;
}

@-webkit-keyframes shwA {
    0% {
        left: 155px;
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        left: 75px;
        opacity: 1;
    }
}

@keyframes shwA {
    0% {
        left: 155px;
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        left: 75px;
        opacity: 1;
    }
}

这是我的javascript：

$(function(){
   var int = setInterval(shwAnimation, 5000);
});
function shwAnimation() {
     // What can I do here to control this animation, I have tried this
     $('.shw-intro').animate({animationPlayState: "running"}, 1000, function () {
        $(this).css('animation-play-state', 'paused');
     });
     // But I think it's not a good idea.
}

任何想法都将不胜感激！感谢。

Answer 1

为什么要用jQuery做到这一点？

只需将动画设置为5秒循环，然后将0％，50％和100％更改为0％，10％和20％。 100％的框架应与20％的框架相同。

这就是我的意思：

@keyframes shwA {
0% {
    left: 155px;
    opacity: 0;
}
10% {
    opacity: 0.5;
}
20% {
    left: 75px;
    opacity: 1;
    }
100% {
    left: 75px;
    opacity: 1;
    }
}

这样你就会有5秒钟的动画时间和4秒的延迟时间。

通过jquery修改CSS动画

1 个答案: