CSS Переход границы перехода мгновенно

Question

Почему граница исчезает мгновенно и не так медленно, как другие свойства?

Примечание: в этом случае граница появляется мгновенно вместо 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>

Answer 1

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>

Answer 2

Вам нужно добавить свойство перехода в обоих 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