Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Propriété: transition-delay

Décaler dans le temps de départ de vos transitions

Création: mai 2012Modifié:

La propriété transition-delay permets de décaler dans le temps le départ d’une transition, par rapport au déclenchement (qui peut être le chargement de la page, un survol, un focus clavier, un case cochée...).

L’unité est la même que pour transition-duration, à savoir les secondes et millisecondes.

div{
    -webkit-transition-delay: 500ms;
       -moz-transition-delay: 500ms;
        -ms-transition-delay: 500ms;
         -o-transition-delay: 500ms;
            transition-delay: 500ms;
}

Voir les Transitions CSS

Besoin de cas concrets avec transition-delay?

Un p'tit mot...

#1par Repitol, le 5 juin 2012

Dommage, je ne parviens pas à retarder le chargement de mon image. J’ai ajouté ce code à l’appel de l’image dans le css de mon template, mais elle continue à s’afficher dès le chargement de la page...

#2par Repitol, le 5 juin 2012

Ah si ! pardon... Je n’avais pas mis le code sur le css de la bonne div.
Donc effectivement ça marche !
Je me sers de ce code pour afficher une image à la place d’une animation flash pour les lecteurs ne disposant pas de flash (Ipad, Iphone, par exemple).
une div "image" placée en css sur mon site
une div "swf" placée en css au même endroit exactement. Il faut retarder le chargement de l’image pour éviter que les lecteurs disposant de flash puisse voir l’image avant que le flash ne soit chargé et se lance.
Merci !

#3par Repitol, le 7 juin 2012

On va me prendre pour un fou, mais aujourd’hui ça ne marche plus. Entre-temps j’ai vidé les cookies du site et l’historique. Du coup, l’image n’est plus retardée, elle apparait de suite et donc s’affiche avant le flash. Pas joli.

#4par css3create, le 7 juin 2012

Salut @Repitol, je ne suis pas un expert mais ne faudrait-il pas charger le Flash OU l’image plutôt que de charger l’image dessous avec un délai d’affichage ? Tu peux aller faire un tour sur ce lien : http://www.adobe.com/devnet/flashpl...

#5par Repitol, le 7 juin 2012

Salut, merci pour ton aide. J’ai essayé, mais l’image se place sous ma div "flash" lorsque j’utilise l’alternative content. Je ne parviens pas à la placer au même endroit que le flash. Je recopie pourtant bêtement les exemples données sur adobe. Comprends pô.


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)