CODEWITHSUNDEEP
cssanimationkeyframe
Kamil
Kamil

Reputation: 79

Restart CSS3 Animation without javascript?

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>

Upvotes: 1

Views: 646

Answers (2)

coffee_addict
coffee_addict

Reputation: 966

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;
    */
}

Upvotes: 1

zoubida13
zoubida13

Reputation: 1759

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

Upvotes: 0

Related Questions