箭头向下反弹动画css

Question

目前我正在制作一个全屏幕标题的向下箭头动画。

这几乎是我想要的，但我不能设置动画之间的间隔。它应该反弹。等几秒钟然后重复。

response.message

Answer 1

只需使用动画的一些时间即可：

e.g。间隔2秒：

-moz-animation-duration:4s;

...

@-moz-keyframes bounce_arrow {
    0%, 10%, 25%, 40%, 50% {-moz-transform: translateY(0);}
    20% {-moz-transform: translateY(-20px);}
    30% {-moz-transform: translateY(-10px);}
    100% {-moz-transform: translateY(0);} // not realy nedded just to be verbose
}

使用4s代替2s将所有百分比除以2，并且从50％到100％没有变化。

延迟4秒，总共使用6秒并将所有百分比除以3，依此类推。