所以我有這個div，我想在懸停時平滑地縮放它。一切順利，順利做大。然而，當我移開鼠標后，它會立即恢復到正常狀態，沒有平滑的過渡。

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
}
.dashboardInfoBox:hover {
    transform: scale(1.5);
    transition: 0.2s linear;
}

<div class="dashboardInfoBox">
    test text
</div>

我不知道如何迫使這種轉變雙向進行...將感謝任何建議！

您必須為父元素dashboardInfoBoxthe提供transition屬性，這應該可以解決問題:)

而不是在懸停狀態下進行轉換。dashboardInfoBox:hover)，將其移動到您的常規類(。dashboardInfoBox)。

實際情況是，只有當您將鼠標懸停在元素上時，您的轉換才會起作用。

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
    transition: 0.2s linear;
}

.dashboardInfoBox:hover {
    transform: scale(1.5);
}