CSS 的 transition 可以有雙向和單向的設定。
網路上沒有什麼資料，目前只有看到這篇：[CSS筆記] transition、transform、animation 動畫屬性
下面二個都是雙向的例子。
啟動方向跟回復方向都套用一樣的效果，transition 屬性寫在初始狀態中。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 500px;
}Demo
https://www.yuantw.com/demo/css-transition/1.html
———
transition 屬性寫在觸發狀態，會套用在啟動方向。transition 屬性寫在初始狀態，會套用在回復方向。
/* 初始狀態 */
div {
width: 100px;
height: 100px;
background: red;
/* 回復方向 套用 */
transition: width 5s, height 5s;
}
/* 觸發狀態 */
div:hover {
width: 300px;
height: 500px;
/* 啟動方向 套用 */
transition: width 2s, height 2s;
}