CSS Animation delay

Question

Hi, does css support delays inbetween animations?

I seem to be able to delay the very first animation of an eye blinking but once it starts it just continues without delay i know i can do this in js but i want to learn keyframes and cant find anything on google.

Thanks 😁

Answer 1

You can change you keyframes according to the delay you want
Like if you want a delay of 1s in middle for total duration of 5s
0% {top:0;}
50% { top:50px;}
70% { top:50px;}
100%{top:100px;}

why 50% - delay in middle
why 70% - 1s of delay in middle
1 is 20% of 5 so 50 + 20 = 70%

It's just an example you can calculate how much delay you want when you want

Answer 2

Lachlan yes, this is the one that only delays the start of the animation but when it begins its not delayed again and each iteration is instant. surely im not the first to want delays between animations?

Answer 3

https://code.sololearn.com/Wg4cvOb1VK3h/?ref=app

Bad_bit is right in incorporating the delay in the keyframes by setting same state for different percentage.

Answer 4

Yes, there is a CSS property called animation-delay or something like that and you can probably find info on it in the sololearn app.

Also, jQuery automatically stacks animations so they happen sequentially.

Answer 5

ye it does

Answer 6

Idk maybe check transition and increse all

Answer 7

Animation-delay may help you

Answer 8

Animation delay can help

Answer 9

Just add 'delay' to your css code

Answer 10

Yes, there is a CSS property called animation-delay or something like that and you can probably find info on it in the sololearn app.

Also, jQuery automatically stacks animations so they happen sequentially.

Answer 11

Hey!
Css animation code

https://code.sololearn.com/WsAAiU3NvnYB/?ref=app