css3之transform动画效果容易踩坑

需求背景描述：鼠标移入盒子时整个盒子上移指定距离12px。

需求简单，实现方式有2：

1、使用 transform：translateY(-12px) ,但是加入动画之后会发现盒子内部的文本会在blod和normal之间频繁来回切换，视觉上会形成不动闪烁的效果。

2、使用定位，鼠标移动到盒子时改变盒子的top值也可以实现该效果，但是鼠标移动到目标盒子边缘时会使整个盒子疯狂抖动。。。。。解决办法是：给盒子加上margin会好一些，但是多测试便会发现还是有点抖动。 阿西吧，就没有完美的解决办法么？？？

 

demo地址：https://codepen.io/xxm_mj/pen/JjNeqaE