CSS Transition out-Effekt funktioniert nicht

Question

i schaffen haben einen kleinen Übergangseffekt

div#Back a { 
 
    width: 40px; 
 
    height: 20px; 
 
    position: fixed; 
 
    left: 6%; 
 
    color: #cccccc; 
 
    z-index: 2; 
 
    bottom: 5%; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    font-variant: inherit; 
 
    border: 1px solid; 
 
    padding: 10px; 
 
    border-radius: 15px; 
 
} 
 

 
div#Back a:hover { 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    
 
    -webkit-transition: border-radius 2s ease-out; 
 
    -moz-transition: border-radius 2s ease-out; 
 
    -o-transition: border-radius 2s ease-out; 
 
    transition: border-radius 2s ease-out; 
 
    
 
}

<div id="Back"><a onclick="goBack();">Back</a></div>

Der Hover-Effekt funktioniert gut, aber der Übergang zum Original funktioniert nicht. Es springt direkt.

Was ist das Problem?

Answer 1

Das Problem ist, dass Sie transition nur für den Hover-Status angegeben haben - also gibt es keinen Übergang, wenn der Status in der anderen "Richtung" wechselt, von Hover zurück zu normal, passiert.

Geben Sie transition für beide an. (Da der: hover Zustand „erbt“ die Werte aus dem normalen Zustand, ist es genug, um es für den Normalzustand geben Sie nur hier.)

div#Back a { 
 
    width: 40px; 
 
    height: 20px; 
 
    position: fixed; 
 
    left: 6%; 
 
    color: #cccccc; 
 
    z-index: 2; 
 
    bottom: 5%; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    font-variant: inherit; 
 
    border: 1px solid; 
 
    padding: 10px; 
 
    border-radius: 15px; 
 
    -webkit-transition: border-radius 2s ease-out; 
 
    -moz-transition: border-radius 2s ease-out; 
 
    -o-transition: border-radius 2s ease-out; 
 
    transition: border-radius 2s ease-out; 
 
} 
 

 
div#Back a:hover { 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
}

<div id="Back"><a onclick="goBack();">Back</a></div>

Answer 2

, dass wegen der ist, wie die CSS funktioniert. Sie haben dort zwei Selektoren mit jeweils eigenen Regeln.

div#Back a { 
    // rules 1 
} 

div#Back a:hover { 
    // rules 2 
} 

Wenn Sie das <a> Element schweben, wird es den rules 2 Satz ausführen. Dieses Set wendet einen Übergangseffekt an, daher sehen Sie eine bewegte Animation zu einer abgerundeten Schaltfläche, wenn Sie sie bewegen.

Wenn Sie aber das Element <a> mit der Maus verlassen, ist der Hover-Effekt nicht mehr aktiv und Sie kehren zum rules 1-Set zurück. Es enthält jedoch keine Übergangsanimation. Die Rendering-Engine "poppt" also den Stil zu dem, was in den Regeln beschrieben ist. Wenn Sie in den ursprünglichen Zustand zurückkehren möchten, definieren Sie einfach Übergangsregeln für diesen Selektor und ändern nur die Werte (für die Animation), wenn Sie den Mauszeiger über das Element bewegen.

div#Back a { 
 
    width: 40px; 
 
    height: 20px; 
 
    position: fixed; 
 
    left: 6%; 
 
    color: #cccccc; 
 
    z-index: 2; 
 
    bottom: 5%; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    font-variant: inherit; 
 
    border: 1px solid; 
 
    padding: 10px; 
 
    border-radius: 15px; 
 
    
 
    -webkit-transition: border-radius 2s ease-out; 
 
    -moz-transition: border-radius 2s ease-out; 
 
    -o-transition: border-radius 2s ease-out; 
 
    transition: border-radius 2s ease-out; 
 
} 
 

 
div#Back a:hover { 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
}

<div id="Back"><a onclick="goBack();">Back</a></div>

Answer 3

den Übergang mit div # Setzen Sie zurück, anstatt die zu schweben.

div#Back a { 
 
    width: 40px; 
 
    height: 20px; 
 
    position: fixed; 
 
    left: 6%; 
 
    color: #cccccc; 
 
    z-index: 2; 
 
    bottom: 5%; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    font-variant: inherit; 
 
    border: 1px solid; 
 
    padding: 10px; 
 
    border-radius: 15px; 
 
    -webkit-transition: border-radius 2s ease-out; 
 
    -moz-transition: border-radius 2s ease-out; 
 
    -o-transition: border-radius 2s ease-out; 
 
    transition: border-radius 2s ease-out; 
 
} 
 

 
div#Back a:hover { 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
}

<div id="Back"><a onclick="goBack();">Back</a></div>