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

Question

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);
}
}

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

Answer 2

Thanks. But were would I put animation-delay: 0.5s; in the code?