Ishita Ishita - 2 months ago 9
CSS Question

Make div appear intermittently using Animation css property not working

My goal is to have 4 colourful squares whose opacity goes from 0 to 1 intermittently to show something is loading.

I used css animation property (see below) to achieve that - but it doesn't work!

animation: opacity 1.5s infinite 200ms


I have implemented it on codepen. Can someone tell me how to fix it?

Answer

This is because you have no keyframe animation assigned to you "opacity" animation. You need to create a keyframe animation for this to work:

(I changed the animation name to "fade" instead of "opacity")

CSS

.loader-block:nth-child(1) {
    background: red;
    animation: fade 1.5s infinite 100ms;
}
...

@-webkit-keyframes fade {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
} 

@keyframes fade {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

CodePen

PS: You also should close out all of your CSS properties with a semicolon (;). I noticed there were a few missing.