CSS Animation Delay in Between Loop -

Trying to get label with slide value, then slide back with CSS.

I have the following -

  - WebKit-Animation-Name: Sliding Processes; -webkit-animation-duration: 300ms; Webkit-animation-repetition-count: infinity; Webkit-animation-timing-function: low-in-out; Webkit-animation-delay: 4s; @ -Vibit-keyframe sliding value {0% {Opacity: 0; Bottom: -30px; } 50% {Opacity: 1; Bottom: 0; } 100% {Opacity: 0; Bottom: -30px; }}  

I realize that the animation starts in 4 seconds, but once it starts, only fast loop fast how do I delay 4 seconds between each loop Add and hold 50% marks for 2 seconds?

Make your loop longer and add more keyframes.

  @ - WebKit-keyframe sliding {0% {Opacity: 0; Bottom: -30px; } / * 0ms initial value * / 2.38% {opacity: 1; Bottom: 0; } / * 150 MB animation * / 34.13% {fuzziness: 1; Bottom: 0; } / * Less than half of the animation of 2150 mms * / 36.51% {fuzziness: 0; Bottom: -30px; } / * 2300ms back initial * / 100% {opacity: 0; Bottom: -30px; } / * 6300 months still beginners Value {-webkit-animation-name: slidingPrice; -webkit-animation-duration: 6300m Webkit-animation-repetition-count: infinity; Webkit-animation-timing-function: low-in-out; Webkit-animation-delay: 4s; }