Restart CSS3 Animation without javascript?

Question

Is it possible to "restart" a keyframe animation after it's stops with the same animation delay time again?

@keyframes scale {
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.animated-btn {
animation: scale ease-in 1;
animation-fill-mode:forwards;
animation-duration: .6s;
animation-delay: 11.8s;
}

<a href="" class="btn btn__arrow animated-btn">
Aniamted Button
</a>

coffee_addict · Accepted Answer · 2016-04-29 13:02:32Z

1

Unfortunately it's not possible to set a delay before each animation, but you can set a delay inside the animation. Just let the animation do nothing for a while until you reach a certain percentage.

Here's the updated code.

@keyFrames scale {
    90% {
        transform: scale(1)
    }
    95% {
        transform: scale(1.3)
    }
    100% {
        transform: scale(1);
    }
}

.animated-btn {
    display: inline-block;
    animation: scale ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 12.4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    /* Or the shorthand:
    animation: scale 1.4s 0s infinite ease-in forwards;
    */
}

answered Apr 29, 2016 at 13:02

coffee_addict

9669 silver badges15 bronze badges

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

Comments

zoubida13 · Accepted Answer · 2016-04-29 10:05:41Z

0

Yes you just need to use the animation-iteration-count property. You can set its value to infinite.

answered Apr 29, 2016 at 10:05

zoubida13

1,77912 silver badges21 bronze badges

1 Comment

Kamil Over a year ago

thats right - but then the animation is playing all the time. I need that the animation has again the same delay time and then play again

Collectives™ on Stack Overflow

Restart CSS3 Animation without javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related