28172 sujets

CSS et mise en forme, CSS3

Transition retour.

Bonjour, j'aimerais appliquer une transition retour sur mon texte. J'ai essayé la technique suivante mais toutes les caractéristiques css du bouton s'appliquaient avec 500ms au chargement de la page. Merci beaucoup Smiley cligne !


.bouton {
li.menu-link {
    display: inline;
    padding: 5px 5px 5px 5px;
    transition: 500ms
  }
  li.menu-link:not(:first-child) {
    margin: 0 0 0 40px;
  }
  li.menu-link:hover {
    color: #fff;
    cursor: pointer;
    transition: 250ms;
  }
}
Modérateur
Salut,

C'est pas très très clair mais si je comprend bien tu souhaites une transition de 500ms au hover et de 250ms quand on arrête de hover c'est ça ?

Sans ce cas il faut échanger les 2 :

.bouton {
li.menu-link {
    display: inline;
    padding: 5px 5px 5px 5px;
    transition: 250ms;
  }
  li.menu-link:not(:first-child) {
    margin: 0 0 0 40px;
  }
  li.menu-link:hover {
    color: #fff;
    cursor: pointer;
    transition: 500ms;
  }
}
Merci de ta réponse Laurent.
C'est exactement ça que je souhaite le problème est que le padding de mon li.menu-link applique la transition de 250ms au chargement de la page en plus de quand on arrête le hover. Désolé je sais que ce n'est pas très clair ...
Si c'est vraiment pas compréhensible y'a aucun problème je le ferais en jquery et le problème sera réglé Smiley cligne
Sujet clos
Aller à