HELP : Animation ("apparition et disparition") en css

Par Bessino, il y a 10 ans

Les bases HTML/CSS

Bonjour,

j'aimerais faire une animation en jquery.

Ce que je fais

En effet j'ai créé un bloc (div) avec un background une image que j'ai nommé "back".
Dans ce bloc "back", j'ai mis deux bloc (div) un en haut (colonne-haut) et l'autre en bas (colonne-bas).
Et dans ces deux bloc "colonne-haut et colonne-bas", j'ai ajouté 4 div chacun : colonne-haut (top1, top2, top3, top4) et colonne-bas (bottom1, bottom2, bottom3, bottom4).
Ensuite, dans chacun des 4 div de chaque colonne (haut et bas), j'ai mis un bloc (div en fond gris) qui lui contient une image transparent.

<div class="back"> <!-- colonne haut --> <div class="colonne_haut"> <!-- logistique --> <div class="top1"> <div class="logistique"> <img src='image/icone/icon_logistique.png' alt='img2' /> </div> </div> <!-- offres et transactions --> <div class="top2"> <div class="offreTransaction"> <img src='image/icone/icon_offreTransaction.png' alt='img2'/> </div> </div> <!-- réclamation abonne --> <div class="top3"> <div class="reclamation"> <img src='image/icone/icon_reclamation.png' alt='img2'/> </div> </div> <!-- offres vendeurs --> <div class="top4"> <div class="offreVendeur"> <img src='image/icone/icon_offreVendeur.png' alt='img2'/> </div> </div> </div> <!-- /colonne haut --> <div class="clear"></div> <!-- colonne bas --> <div class="colonne_bas"> <!-- commisionnement --> <div class="bottom1"> <div class="commission"> <img src='image/icone/icon_commission.png' alt='img2'/> </div> </div> <!-- incident technique --> <div class="bottom2"> <div class="incidentTechnique"> <img src='image/icone/icon_incident.png' alt='img2'/> </div> </div> <!-- plv --> <div class="bottom3"> <div class="plv"> <img src='image/icone/icon_plv.png' alt='img2'/> </div> </div> <!-- sav --> <div class="bottom4"> <div class="sav"> <img src='image/icone/icon_sav.png' alt='img2'/> </div> </div> </div> <!--colonne bas --> </div>

Ce que je veux

Maintenant ce je veux faire c'est faire une animation, c'est à dire qu'au moment ou je charge ma page je peux voir l'image du div "back", donc l'image en background et juste queleque seconde après le div "back" disparait pour faire place aux 2 div à l'intérieur " colonne-haut et colonne-bas" qui eux vont afficher les 4 div du haut et bas contenant les images.

Mais je ne sais pas comment le faire en css.

2 réponses

Reivax, il y a 10 ans

Je suis pas sûr d'avoir bien compris perso.
Si j'ai tout capté : tu as une image qui recouvre ta div back, et tu voudrais que quelques seconds après ton chargement elle disparaisse pour laisser apparaitre le contenu. C'est ça ??

Je pense qu'un petit codepen serait le bienvenue :)