向下箭头弹跳动画CSS

Question

目前，我正在为全屏标题制作向下箭头动画。

它几乎可以满足我的要求，但是我无法设置动画之间的间隔。 它应该反弹。 等待几秒钟，然后重复。

.bounce_arrow {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;}

.animated_arrow{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;

animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;

animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}


@-webkit-keyframes bounce_arrow {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-10px);}
}

@-moz-keyframes bounce_arrow {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}

Answer 1

只需花费一段时间的动画就什么都不做：

例如，两秒之间的间隔为：

-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，依此类推。