Afficher pendant un temps detterminé une image à l'ouverture page we

Bonjour,
Tout est dans le titre mais je ne sais pas comment faire.
Je souhaiterai à l'ouverture du site de mon association afficher un texte ou une image pour attirer l'attention.
Cet affichage doit au bout de quelques secondes disparaître.
Merci pour votre aide,

Cordialement

Et l'eau,

C'est en JS que tu pourras y arriver.
Pour ce faire, tu auras besoin de :
- window.addEventListener => load ou DOMContentLoaded
- setTimeout
- cibler ton image
- ajouter une class ou un style à la volée

Bonjour,
et pourquoi pas plus simple, par exemple : https://blog.hubspot.com/website/css-fade-in
Il y a des exemples de codes tout fait, avec fade ou opacity, aussi bien pour une image que pour du texte. Mais tu devras adapter un peu, l'animation revient constamment, alors que tu la veux qu'une seule fois. Il faudra enlever les @keyframe, et aussi mettre "fadeOut" à la place de "fadeIn".
Reste à voir si ce genre d'animation html/css se déclenche bien à l'ouverture de la page.

Bongota a écrit :
Bonjour,
et pourquoi pas plus simple, par exemple : https://blog.hubspot.com/website/css-fade-in
Il y a des exemples de codes tout fait, avec fade ou opacity, aussi bien pour une image que pour du texte. Mais tu devras adapter un peu, l'animation revient constamment, alors que tu la veux qu'une seule fois. Il faudra enlever les @keyframe, et aussi mettre "fadeOut" à la place de "fadeIn".
Reste à voir si ce genre d'animation html/css se déclenche bien à l'ouverture de la page.

bien vu, je n'avais pas du tout pensé aux @keyframe