JSFiddle - React, Tailwind, and code Playground

HTML

<div><div id="objet1"></div><div id="objet2"></div><div id="objet3"></div></div>

CSS

@-moz-keyframes animObjet1 {
    0%, 28%, 100% { opacity : 1; }
    33%, 95% { opacity : 0; }
}

@-moz-keyframes animObjet2 {
    33%, 62% { opacity : 1; }
    0%, 28%, 67%, 100% { opacity : 0; }
}

@-moz-keyframes animObjet3 {
    67%, 95% { opacity : 1; }
    0%, 62%, 100% { opacity : 0; }
}

@-webkit-keyframes animObjet1 {
    0%, 28%, 100% { opacity : 1; }
    33%, 95% { opacity : 0; }
}

@-webkit-keyframes animObjet2 {
    33%, 62% { opacity : 1; }
    0%, 28%, 67%, 100% { opacity : 0; }
}

@-webkit-keyframes animObjet3 {
    67%, 95% { opacity : 1; }
    0%, 62%, 100% { opacity : 0; }
}

@keyframes animObjet1 {
    0%, 28%, 100% { opacity : 1; }
    33%, 95% { opacity : 0; }
}

@keyframes animObjet2 {
    33%, 62% { opacity : 1; }
    0%, 28%, 67%, 100% { opacity : 0; }
}

@keyframes animObjet3 {
    67%, 95% { opacity : 1; }
    0%, 62%, 100% { opacity : 0; }
}

#objet1 {
    -moz-animation : animObjet1 10s infinite linear;
    -webkit-animation : animObjet1 10s infinite linear;
    animation : animObjet1 10s infinite linear;
}
#objet2 {
    -moz-animation : animObjet2 10s infinite linear;
    -webkit-animation : animObjet2 10s infinite linear;
    animation : animObjet1 10s infinite linear;
}
#objet3 {
    -moz-animation : animObjet3 10s infinite linear;
    -webkit-animation : animObjet3 10s infinite linear;
    animation : animObjet1 10s infinite linear;
}

div {
    position : relative;
    width : 150px;
    height : 150px;
}

div[id] {
    position : absolute;
}

#objet1 {
    background : red;
}

#objet2 {
    background : blue;
}

#objet3 {
    background : green;
}