Les Transitions CSS: Frontière Diapositives au Lieu de s'atténuer

Je style un lien de sorte que quand vous passez, il n'y aura apparaître une bordure sur le haut; et lorsque vous passez la frontière va disparaître avec une transition. La frontière diapositives au lieu de s'atténuer lorsque vous passez la souris dessus et en dehors. Je veux la frontière fondu à la place de la diapositive. Comment puis-je faire cela? Voici une JsFiddle

HTML

<div>Text</div>

CSS

div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border .2s ease-in-out;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
}

div:hover {
    border-top: 3px solid #000;
}

html, body {
    margin: 0;
    padding: 0;
}
InformationsquelleAutor Moussa Harajli | 2013-05-30
  1. 20

    Si vous souhaitez animer la couleur, animer la couleur, pas la totalité de la frontière. Désormais, vous êtes également à l'animer à partir de 0 pixels à 3 pixels, de sorte qu'il glisse dans. Vous devez juste lui donner une valeur par défaut bordure transparente à la place.

    div {
    line-height: 50px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border-color .5s ease-in-out;
    border-top: 3px solid transparent;
}

div:hover {
    border-top-color: #000;
}

    Exemple sur JSfiddle

    Au passage: -moz-transition est obsolète de nos jours, puisque FF17 ou si Mozilla prend en charge le CSS du module Transitions sans préfixe.

    Mise à jour déc 2014: comme je l'ai remarqué cette réponse est encore en cours de visualisation et upvoted fréquemment, veuillez noter que transition n'est plus préfixé dans tout actuellement ou récemment remplacé les navigateurs.

    • J'ai ajouté une note sur la préfixation étant donné la prise en charge du navigateur.
    InformationsquelleAutor Niels Keurentjes
  2. 2

    Dans ce cas, vous allez avoir besoin d'avoir une bordure pour commencer ainsi. Rendre transparent dans le premier état. De cette façon, il ne sera pas "grandir" en place... et la couleur se fanent juste mesure de son évolution.

    http://jsfiddle.net/kLnQL/11/

    div {
  border: 3px solid transparent;
}

div:hover {
  border: 3px solid #f06;
}
    • Quant à savoir si ou non -moz-transition est nécessaire, je voudrais découvrez css3please.com et de prendre la décision pour vous-même. Je pense qu'il pourrait y avoir quelqu'un là-bas à l'aide de firefox 16?
    InformationsquelleAutor nouveau