Chuyển tiếp CSS: Trang trình bày viền thay vì mờ

Question

Tôi đã tạo kiểu liên kết để khi bạn di chuột qua, sẽ xuất hiện đường viền ở trên cùng; và khi bạn di chuột ra khỏi biên giới sẽ biến mất với một quá trình chuyển đổi. Đường viền trượt vào thay vì mờ dần khi bạn di chuột qua nó và tắt. Tôi muốn biên giới mờ dần thay vì trượt. Tôi có thể làm cái này như thế nào? Đây là một 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

Nếu bạn muốn biến đổi màu, biến đổi màu, không phải toàn bộ biên giới. Bây giờ bạn cũng đang làm động nó từ 0 pixel đến 3 pixel, do đó, tất nhiên nó trượt vào. Bạn chỉ cần cung cấp cho nó một đường viền mặc định trong suốt để thay thế.

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

Là một sidenote: -moz-transition là lỗi thời hiện nay, kể từ khi FF17 hoặc lâu hơn Mozilla hỗ trợ các mô-đun chuyển tiếp CSS mà không tiền tố.

Cập nhật tháng 12 năm 2014: như tôi nhận thấy câu trả lời này vẫn đang được xem và bỏ phiếu tán thường xuyên, xin lưu ý rằng transition không còn tiền tố trong any current or recently superseded browsers.

Answer 2

Trong trường hợp này - bạn cũng sẽ cần có đường viền để bắt đầu. Làm cho nó minh bạch trong trạng thái đầu tiên. Bằng cách này nó sẽ không "phát triển" vào vị trí ... và màu sắc sẽ mờ đi khi nó thay đổi.

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

div { 
    border: 3px solid transparent; 
} 

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