Przejścia CSS: Slajdy obramowania Zamiast zacierania

Question

Ustawiłem styl linku, aby po najechaniu nim na górze pojawiło się obramowanie; a po zejściu z brzegu granica zniknie wraz z przejściem. Obramowanie przesuwa się zamiast zanikania po najechaniu na niego i wyłączeniu. Chcę, żeby granica zniknęła zamiast suwaka. Jak mogę to zrobić? Oto 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; 
} 

Answer 1

Jeśli chcesz animować kolor, animować kolor, a nie całą granicę. Teraz animujesz go od 0 do 3 pikseli, więc oczywiście się wsuwa. Powinieneś po prostu nadać mu domyślną przezroczystą ramkę.

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; 
} 

Sample on JSfiddle

Jak sidenote: -moz-transition jest nieaktualne w dzisiejszych czasach, ponieważ FF17 lub tak Mozilla obsługuje moduł CSS Transitions bez prefiksu.

Aktualizacja grudnia 2014: jak zauważyłem, to odpowiedź jest nadal przeglądać i upvoted często należy pamiętać, że nie jest już transition prefiksem w any current or recently superseded browsers.

Answer 2

W tym przypadku - na początku musisz mieć również granicę. Spraw, aby był przezroczysty w pierwszym stanie. W ten sposób nie będzie "rosnąć" na swoje miejsce ... a kolor po prostu zniknie, gdy się zmieni.

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

div { 
    border: 3px solid transparent; 
} 

div:hover { 
    border: 3px solid #f06; 
}