2024-07-23 css設定了元素top：-20px，然後設定transition: all 3s;結果transition不生效？==》未設定初始值

叶乘风發表於2024-07-23
CSS

如果你期望滑鼠移動到某元素，某元素會上移一段距離，你也許會這麼寫

.box {
position: relative;
transition: all 3s;
}

.box:hover {
top: -20px;
}

結果上移是上移了，但是過渡效果transition沒生效

原因：需要給transition所在元素設定初始值，也就是說你要上移，就得設定初始值，比如top: 0px；

.box {
position: relative;
top: 0px;
transition: all 3s;
}

.box:hover {
top: -20px;
}

這樣效果就出來了

相關文章