CSS animation delay in between loop

Question

Trying to get a label with class price to slide up, then slide back down with CSS.

I have the following --

-webkit-animation-name: slidingPrice;
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 4s;

@-webkit-keyframes slidingPrice {
  0% { opacity: 0; bottom: -30px; }
  50% { opacity: 1; bottom: 0; }
  100% { opacity: 0; bottom: -30px; }
}

I am seeing that the animation starts in 4 seconds, but once it starts, just continuously loops in a fast manner. How would I add a 4 second delay in between each loop and stop for a 2 seconds at the 50% mark?

Does this answer your question? [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) — T J, May 06 '21 at 16:24

score 19 · Accepted Answer · answered Mar 17 '15 at 23:33

Make your loop longer and add more keyframes.

@-webkit-keyframes slidingPrice {
  0%     { opacity: 0; bottom: -30px; } /* 0ms initial values */
  2.38%  { opacity: 1; bottom: 0; }     /* 150ms half of animation */
  34.13% { opacity: 1; bottom: 0; }     /* 2150ms still at half of animation */
  36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
  100%   { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}

.price {
    -webkit-animation-name: slidingPrice;
    -webkit-animation-duration: 6300ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
}

just in case if you need reverse animation `-webkit-animation-direction: alternate, reverse, normal;` — Syed, Aug 02 '16 at 15:43

CSS animation delay in between loop

1 Answers1

Linked