CSS-Transitionsbegrenzung wird sofort zurückgesetzt

Question

Warum verschwindet die Grenze augenblicklich und nicht langsam wie bei den anderen Eigenschaften?

Hinweis: In diesem Fall erscheint der Rand sofort anstelle der Verzögerung von 2 Sekunden.

.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

Die initial value of the border-style property ist none.

Dies bedeutet, dass der Rahmen nicht zurückgeht, da der Rahmen überhaupt nicht angezeigt werden soll, wenn border-style auf none eingestellt ist. Wenn Sie den ursprünglichen Eigenschaftswert border-style auf etwas wie solid setzen, wird es wie erwartet übergehen.

Es ist auch darauf hinzuweisen, dass der Standard border-width property Wert medium und und der Standard border-color property Wert ist currentColor (was im wesentlichen bedeutet, wird es sein, was auch immer die color Eigenschaft auf).

.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

Sie müssen den Übergang Eigenschaft in hinzuzufügen, sowohl die class und die 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; 
} 

Hinzufügen der transition sowohl die class und seine :hover macht die div zurückkehren zu seiner Normalzustand zur gleichen Zeit es ändert sich auf