Animation delay not working anymore

Animation delay not working anymore


I’m working on my Wikipedia viewer and I made this nice animation delay when my results are appearing on the screen. A few hours ago it was working just fine, but I’ve made some changes (css mostly) and now the delay isn’t happening anymore. I have no idea why though. I’ve read that the delay must be declared under the animation, and it seems to me that the css satisfies that requirement, but obviously I’m missing something.

Here’s the pen:

The delays are at the bottom of the css, the @keyframes are above that and the .result class which is being animated is on line 51. If there’s someone who could take a look, I would really appreciate it.


I’m not really sure what the problem is, because I don’t really understand what you are trying to do, it seems fine to me. I had problems with my animation for a while with my wikipedia viewer as well and after hours of trying to figure it out, I realize putting !important solved my problem. so perhaps that is the case, since your problem is similar to mine.
here’s mine, so you can see how it works.


I also am having trouble understanding what the issue is. What exactly are you wanting to happen after entering search text and hitting enter or tab? Try to be as detailed as possible.


I have an animation delay for each result:

.result:nth-child(1) {
animation-delay: 50ms;

… for the first element

.result:nth-child(2) {
animation-delay: 75ms;

… for the second, and so on.

The result is that they don’t appear all at once (as they do now), but one after another. The funny thing is that it was working until a while ago and now I messed it up.


Sorry, I’ll try to explain again. The problem I have regards only the instant when my results appear on the screen, nothing else. I animated the opacity of the .result class and then I added a delay to each element of this class separately. So for example .result:nth-child(1) has an animation-delay of 50ms, while the second element has

.result:nth-child(2) {
animation-delay: 75ms;

So the opacity should be delayed progressively for each element that has the class .result
Right now, the delay is not working, so as a result all of the elements are going from 0% opacity to 100% at the same time.


Fixed it! As expected, it was a silly mistake. I was applying the animation-delay to the child of the element I was actually trying to animate. Here is how I wanted it to animate: