Modify CSS Animation by jquery

Question

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.

Perhaps add/remove a class from the affected objects so the animation is either picked up from the CSS or is not. — jfriend00
– jfriend00, Commented Dec 7, 2013 at 2:29

Shomz · Accepted Answer · 2013-12-07 02:31:34Z

2

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.

answered Dec 7, 2013 at 2:31

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ringo Over a year ago

Thanks for reply! This is the information box I want to translate, and I want when I change this box the background will be changed too.

Shomz Over a year ago

Ah, I see, that makes sense. You might want to include that in your question as well.

Collectives™ on Stack Overflow

Modify CSS Animation by jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related