CSS Animation delay | SoloLearn: Learn to code for FREE!

+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 😁

2/25/2019 3:48:36 PM

D_Stark

11 Answers

New Answer

+14

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

+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?

+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.

+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.

+1

+1

Idk maybe check transition and increse all

+1

Animation-delay may help you

+1

Animation delay can help

+1

Just add 'delay' to your css code

+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.

0

Hey! Css animation code https://code.sololearn.com/WsAAiU3NvnYB/?ref=app