28172 sujets

CSS et mise en forme, CSS3

Automatiser figcaption

Bonjour,
Est-il possible d'automatiser une figcaption (en slide), j'entends par cela que la légende n'apparaisse pas lors du :hover mais 2 secondes après que l'image soit affichée ? Si tel est le cas, est-il possible de la même manière de refermer ces figcaptions après un temps donné ?
Merci pour votre aide et bonne journée,
D.
Merci pour ta réponse SolidSnake !
Je dois donc supprimer ma marge des CSS de figcation et les remplacer par :
<style type="text/css">
  fibcaption {
    animation-duration: 3s;
    animation-name: slidein;
  }
  
  @keyframes slidein {
    from {
      margin-left: 100%;
    }
    
    to {
      margin-left: 0%;
    }
  }
</style>

que je peux compléter par :
<style type="text/css">
  fibcaption {
    animation-duration: 3s;
    animation-name: slideout;
  }
  
  @keyframes slideout {
    from {
      margin-left: 0%;
    }
    
    to {
      margin-left: 100%;
    }
  }
</style>

Malheureusement, je ne pourrais pas tester avant ce soir Smiley ohwell Le code te semble- t'il correct excepté la gestion des évènement (et là, je n'y comprends rien Smiley decu
Encore merci et bonne journée,
D.
Bonsoir SolidSnake,
Merci pour votre réponse Smiley smile
Je ne vois pas d'animation dans le codepen Smiley decu Avec un margin-left à 0%, la figcaption est bien présente; mais à 100%, j'ai l'impression qu'elle reste à 100 %. J'ai préfixé le keyframes, tenté de changer le "timing" de l'animation et diverses autres choses : idem Smiley ohwell Ça ne doit pas être grand chose mais je ne vois plus où chercher Smiley bawling
Bonne soirée et merci,
D.
Bonjour,

Effectivement je n'ai rien préfixé du tout, mais je suis sur Chrome (et j'ai MÊME testé sur IE11), et ça fonctionne.
Tu attends bien 2s sur l'image ?

EDIT : je viens de comprendre, tu ne souhaites pas que ça apparaisse deux secondes après un hover (j'ai lu trop vite), mais deux secondes après que l'image se soit affichée ?
Si tel est le cas, il suffit simplement de coller la ligne animation:xxx dans figcaption plutôt que sur le hover.
Modifié par SolidSnake (19 Nov 2015 - 08:26)
Bonsoir SolidSnake,
je viens de comprendre, tu ne souhaites pas que ça apparaisse deux secondes après un hover (j'ai lu trop vite), mais deux secondes après que l'image se soit affichée ?
Si tel est le cas, il suffit simplement de coller la ligne animation:xxx dans figcaption plutôt que sur le hover
YES !!! ÇA FONCTIONNE Smiley biggrin !!! Pour le coup, le premier code aussi (en :hover) of course !!! (j'ai été stupide en pensant que le hover était sur le body... SO STUPID !!! Désolé Smiley rolleyes )
C'est exactement ce que je désirais Smiley cligne Sujet RESOLU ! MERCI !!!
Par curiosité, le codepen (legende sur le :hover) ne fonctionne qu'une seule fois. Afin qu'il fonctionne à chaque :hover (ce qui n'est pas ma question d'origine) il faut rajouter "infinite" je suppose (?) mais je ne sais où (j'ai fait qq tests) Smiley murf Juste par curiosité, sujet résolu !
Un GRAND MERCI !!! Bon Week-end à vous !
D.
Sujet clos
Aller à