使用 CSS3 制作悬浮卡片/按钮效果时，文字抖动的问题

2020.06.10记，使用 CSS3 动画特效制作卡片鼠标移入有悬浮效果时遇到的文字抖动掉帧问题，如下所示：

一、出现的问题

文字出现抖动：

gif5新文件.gif

代码：

    

        

            

                6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
                6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
                6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
                新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。
            
        
    

我们会发现鼠标移入的时候，有一点文字掉帧的问题，当时是使用 translateY 造成该问题的出现，当我想应该用 translateZ 没设置造成视觉误差，于是我设置了 translateZ 发现依然没用。

二、解决方法

把 translateY 改成 position: relative; 绝对定位 top: 0; 移入的时候改为 top: -6px 完美解决该问题。使用 translateY 可能不是最好的动画效果。

效果：

gif5新文件 (1).gif

代码：

    

        

            

                6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
                6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
                6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
                新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。