Arrow down bounce animation css

Question

Currently I am working on an arrow down animation for a full screen header.

It is almost doing what I want but I just can't set the interval between the animation. It should bounce. Wait a few seconds and then repeat.

.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);}
}

Possible duplicate of [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) — Samuel Kirschner, Sep 05 '17 at 14:46

Samuel Kirschner · Answer 1 · 2017-09-05T14:51:59.187

Just use some time of the animation to do nothing:

e.g. 2 seconds of interval between:

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

Use 4s instead of 2s divide all percentage by 2, and have no change from 50% till 100%.

For 4 seconds delay, use 6 seconds total and divide all percentage by 3, and so on.

Arrow down bounce animation css

1 Answers1