浮动阴影-为什么我的css浮动元素总是差那么点意思

很多站点都这样的效果，鼠标移上去时对应元素上浮，然后这样的元素往往有一排。博主常见的操作是左右平移几次，然后元素就跟琴键一样依次浮动，看起来非常解压。虽然这个效果有个小小的bug，将鼠标停留在浮动起点与终点的一小块区域，会导致重复触发，视觉上的感觉是元素不停的抖动，架不住人家效果优秀，所以想用自己来实现一下这个效果。

用如下代码实现了一下这个效果，但实际使用中却感觉效果单调，仔细观察了一下包含效果的其他站点，最后发现是元素上浮后元素阴影也会有变化。

.catelist{ 
    width:120px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transform: translateY(0px);
    transition: all 0.2s ease-out;
}
.catelist:hover{ 
    transform: translateY(-8px);
}

重新修改了一下css代码，在元素上浮时，同时增加元素的阴影，很小的一个细节，但效果感觉就出来了。

.catelist{ 
    width:120px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transform: translateY(0px);
    transition: all 0.2s ease-out;
}
.catelist:hover{ 
    transform: translateY(-8px);
    box-shadow: 2px 10px 16px rgb(0 0 0 / 20%);
}