28172 sujets

CSS et mise en forme, CSS3

Faire disparaître image au bout de 5 sec

Bonjour,

J'avoue être complètement nul en css , quelqu'un saurait-il comment faire disparaître une image au bout de 5 sec ? c'est mon besoin .

J'ai pensé avec un display none mais sans maîtriser la syntaxe de la transition à écrire ou un height=0 car j'ai cru comprendre que display ne faisait pas parti des transitions .

Merci d'avance pour votre aide .
Salut,

Sans être un pro des transitions, il me semble qu'il faut un événement déclencheur pour qu'une transition s'exécute (par exemple: l'ajout d'une classe CSS via javascript, le survol de la souris, etc).

Voici ce qu'il faudrait faire si tu voulais faire disparaître une image 5 secondes après le survol de l'image par la souris (il faut ajouter les préfixes vendeurs):
#monImage { 
    transition-property:all;
    transition-duration: 1s;
    transition-delay: 5s;
}

#monImage:hover {
    opacity:0;
}
Merci.

C'est peut-être juste impossible en css..... Pour tout dire j'ai un script d'un site externe qui s’intègre en 5 secondes sur ma page , je voulais mettre une image "d'attente" et que celle-ci disparaisse à peu prés après ces qq sec de chargement.

Si toutefois un pro de la transition pouvait me confirmer que c'est impossible (sans hover ou autre )? La position de l'image pourrait faire l'affaire car elle descend de pas mal de pixel quand le truc a fini de chargé.
bonsoir,

c'est possible simplement avec animation par exemple :
http://result.dabblet.com/gist/4505680 (page démo)
http://dabblet.com/gist/4505680 (page éditable à la volée)
mais avec des défaut.
(ou variante avec contenu : http://dabblet.com/gist/4505897 http://result.dabblet.com/gist/4505897 ou sans contenu http://dabblet.com/gist/4505802 http://result.dabblet.com/gist/4505802)

Si le navigateur ne supporte pas les animations , c'est le style par défaut dans la feuille de style qui l'emporte (dans l'exemple, l'image reste transparente), il faut donc bien y penser.

L'idéal et le JavaScript pour mieux contrôler ton effet/timing.

++
Modifié par gc-nomade (10 Jan 2013 - 22:19)
Sujet clos
Aller à