+ 17

CSS Animation delay

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 😁

25th Feb 2019, 3:48 PM
D_Stark
D_Stark - avatar
11 Answers
+ 15
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
26th Feb 2019, 3:01 AM
good_bits
good_bits - avatar
+ 10
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?
25th Feb 2019, 10:28 PM
D_Stark
D_Stark - avatar
+ 7
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.
26th Feb 2019, 6:02 AM
Gordon
Gordon - avatar
+ 5
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.
25th Feb 2019, 5:49 PM
Lachlan
+ 1
ye it does
26th Feb 2019, 8:59 AM
The Happy Coffe Cup
The Happy Coffe Cup - avatar
+ 1
Idk maybe check transition and increse all
26th Feb 2019, 12:33 PM
Roger C
Roger C - avatar
+ 1
Animation-delay may help you
26th Feb 2019, 6:50 PM
AKS
AKS - avatar
+ 1
Animation delay can help
27th Feb 2019, 7:11 AM
Alpha
Alpha - avatar
+ 1
Just add 'delay' to your css code
28th Feb 2019, 9:35 AM
Luka Timofeev
Luka Timofeev - avatar
+ 1
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.
28th Jul 2020, 7:20 PM
Besher
2nd Apr 2020, 9:28 AM
SAN
SAN - avatar