2020.06.10记，使用 CSS3 动画特效制作卡片鼠标移入有悬浮效果时遇到的文字抖动掉帧问题，如下所示：
一、出现的问题
文字出现抖动：
gif5新文件.gif
代码：
<style>
* {
margin: 0;
font-family: "微软雅黑";
}
ul{
list-style: none;
}
.box {
margin: 40px auto;
width: 400px;
height: 300px;
background-color: #f1f1f1;
box-shadow:0px 2px 2px #ddd;
transform: translateY(0);
transition: .2s linear;
}
.box:hover {
box-shadow:0px 4px 4px #c8c8c8;
transform: translateY(-6px);
transition: .2s linear;
}
.list {
padding: 20px;
text-align: left;
}
</style>
<body>
<div class="box">
<ul class="list">
<li>
6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。
</li>
</ul>
</div>
</body>
我们会发现鼠标移入的时候，有一点文字掉帧的问题，当时是使用 translateY 造成该问题的出现，当我想应该用 translateZ 没设置造成视觉误差，于是我设置了 translateZ 发现依然没用。
二、解决方法
把 translateY 改成 position: relative; 绝对定位 top: 0; 移入的时候改为 top: -6px 完美解决该问题。使用 translateY 可能不是最好的动画效果。
效果：
gif5新文件 (1).gif
代码：
<style>
* {
margin: 0;
font-family: "微软雅黑";
}
ul{
list-style: none;
}
.box {
margin: 40px auto;
position: relative;
top: 0;
width: 400px;
height: 300px;
background-color: #f1f1f1;
box-shadow:0px 2px 2px #ddd;
transition: .2s linear;
}
.box:hover {
top: -6px;
box-shadow:0px 4px 4px #c8c8c8;
transition: .2s linear;
}
.list {
padding: 20px;
text-align: left;
}
</style>
<body>
<div class="box">
<ul class="list">
<li>
6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。
</li>
</ul>
</div>
</body>
网友评论