0

How do I use "animation-delay" in CSS?

How would I use animation-delay in this code? .r { height: 30px; width: 30px; background-color = red animation: spin 1s infinate; } @keyframes spin { 50 { transform: rotate(360deg); } } .r2 { height: 30px; width: 30px; background-color = red animation: spin2 1s infinate; } @keyframes spin2 { 50 { transform: rotate(360deg); } }

17th Sep 2018, 8:00 PM
Benjamin Fonville
Benjamin Fonville - avatar
2 Respostas
+ 1
Hey, you can achieve this in 1 of 2 ways. The first way is to use the "animation-delay" property explicitly like this: animation-delay:0.5s for example. Another way to do it is fixing it in the animation shorthand property like it will be the Second value in seconds in this case , using your code base as an example here is how to do that... r { height: 30px; width: 30px; background-color = red animation: spin 1s infinite 0.5s; } @keyframes spin { 50 { transform: rotate(360deg); } } .r2 { height: 30px; width: 30px; background-color = red animation: spin2 1s infinite 0.5s; } @keyframes spin2 { 50 { transform: rotate(360deg); } } I have set the animation property to 0.5s in this case okay, do u understand?
17th Sep 2018, 8:38 PM
Precious Adeyinka
0
Thanks. But were would I put animation-delay: 0.5s; in the code?
17th Sep 2018, 9:30 PM
Benjamin Fonville
Benjamin Fonville - avatar