Question

是否可以重新启动＆＃34;一个关键帧动画在它再次以相同的动画延迟时间停止后？

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

不幸的是，在每个动画之前无法设置延迟，但您可以在动画中设置延迟。让动画暂时不做任何事情直到你达到一定的百分比。

这是更新的代码。

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

Answer 2

是的，您只需要使用the animation-iteration-count property。您可以将其值设置为无限。

没有javascript重启CSS3动画？

2 个答案: