CSS過渡邊界瞬間恢復

邊界爲什麼瞬間消失而不像其他屬性那樣緩慢？CSS過渡邊界瞬間恢復

注意：在即邊界出現瞬間而不是2秒延遲。

.figure { 
 
\t height: 160px; 
 
\t width: 160px; 
 
\t background-color: red; 
 
\t transition-property: all; 
 
\t transition-duration: 2s; 
 
} 
 

 
.figure:hover{ 
 
\t background-color: blue; 
 
\t border: 10px solid pink; 
 
\t color: yellow; 
 
}

<div class='figure'>Stackoverflow</div>

來源

2017-02-05 Robert Rocha

的initial value of the border-style property是none。

這意味着邊框不會回退，因爲當border-style設置爲none時，根本不會顯示邊框。如果您將初始border-style屬性值設置爲solid之類的值，則它將按預期進行轉換。

這也是值得指出的是默認border-width property值爲medium和，默認border-color property值爲currentColor（這基本上意味着它會無論color屬性設置爲）。

.figure { 
 
    height: 160px; 
 
    width: 160px; 
 
    background-color: red; 
 
    border-style: solid; 
 
    border-width: 0; 
 
    transition-property: all; 
 
    transition-duration: 2s; 
 
} 
 
.figure:hover { 
 
    background-color: blue; 
 
    border: 10px solid pink; 
 
    color: yellow; 
 
}

<div class='figure'>Stackoverflow</div>

來源

2017-02-05 01:32:27

哈！這很有道理！謝謝！ –

更準確的解釋是邊框樣式根本無法轉換。你甚至不能在實體和虛線之間轉換。當然，向任何一種3D外觀樣式過渡都是一個讓外觀更好的挑戰，更不用說標準化了。 – BoltClock

另請參閱http://stackoverflow.com/questions/14385422/why-dont-css3-animations-work-on-outline-with-default-none/14386672#14386672，其中同樣的事情適用於大綱樣式。 – BoltClock

您需要在添加過渡性質既class和class:hover

.figure { 
    height: 160px; 
    width: 160px; 
    background-color: red; 
    transition: all linear 2s; 
    -webkit-transition: all linear 2s; 
    -moz-transition: all linear 2s; 
} 

.figure:hover{ 
    background-color: blue; 
    border: 10px solid pink; 
    color: yellow; 
    transition: all linear 2s; 
    -webkit-transition: all linear 2s; 
    -moz-transition: all linear 2s; 
}

添加transition到兩個class及其:hover，使div恢復到其正常狀態同時發生變化hover

來源

2017-02-05 01:37:22

CSS過渡邊界瞬間恢復

回答

相關問題