CODEWITHSUNDEEP
javascriptjquerycss
Ringo
Ringo

Reputation: 3965

Modify CSS Animation by jquery

I have created an animation translate by css, now I want to play/stop this animation every 5s. How can I do that? This is the information box I want to translate, and I want when I change this box the background will be changed too. Here is my 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;
    }
}

And this is my 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.
}

Any idea would be appreciated! Thanks.

Upvotes: 1

Views: 97

Answers (1)

Shomz
Shomz

Reputation: 37701

Why would you do that with jQuery?

Just set the animation to loop at 5 seconds and change 0%, 50% and 100% you have to 0%, 10% and 20%. The frame at 100% should be the same as the on at 20%.

This is what I mean: 

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

That way you'll have a 5 second period with the first second of animation and four seconds of delay.

Upvotes: 2

Related Questions