同一页面上CSS转换的差异

Question

我很困惑，为什么我在同一页面上依赖于滚动获得相同元素的不同转换。使用Chrome-Mac

DEMO

1. 滚动顶部黑色条并注意它在
中加入



1. 滚动到页面顶部并翻转以查看平滑的所需过渡



#top, #bottom, #left, #right {
    background: #fff;
    position: fixed;
    z-index: 200;
}    
#top:hover { 
        height: 60px;
        -webkit-transition: .25s all ease;
    }