Html 鼠标悬停时无法滚动溢出数据

我需要停止转换，一旦它到达结束意味着李22。但它又是第一位的

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
.文本框{
宽度：80%；
空白：nowrap；
溢出：隐藏！重要；
}
.卷轴{
显示器：flex；
}
.文本框{
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：#fefefe；
颜色：#333；
边框：1px实心#4a4a4a；
}
.textBox：悬停。滚动{
位置：绝对位置；
-moz动画：向左滚动2s线性；
-webkit动画：向左滚动2s线性；
动画：向左滚动2s线性；
}
@-moz关键帧向左滚动{
0% {
-moz变换：translateX（100%）；
}
100% {
-moz变换：translateX（-100%）；
}
}
@-webkit关键帧向左滚动{
0% {
-webkit转换：translateX（100%）；
}
100% {
-webkit转换：translateX（-100%）；
}
}
@关键帧向左滚动{
0% {
-moz变换：translateX（100%）；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
100% {
-moz变换：translateX（-100%）；
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
}

我想你想要这样：-

现在您正在使用

calc（80%-100%）

这意味着您正在滚动-仅为20%

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
.文本框{
宽度：80%；
空白：nowrap；
溢出：隐藏！重要；
}
.卷轴{
显示器：flex；
}
.textBox.scroll{
过渡：1s；
}
.textBox：悬停。滚动{
transform:translateX（-90%）；//更新它//
}

通过设置宽度100%来尝试 如下面的代码所示

保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
.文本框{
宽度：100%；
空白：nowrap；
溢出：隐藏！重要；
}
.卷轴{
显示器：flex；
}
.textBox.scroll{
过渡：1s；
}
.textBox：悬停。滚动{
转化：translateX（计算（90%-100%）；
}

如果您仍在搜索它和来源：

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
.文本框{
宽度：80%；
空白：nowrap；
溢出：隐藏！重要；
}
.卷轴{
显示器：flex；
}
.文本框{
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：#fefefe；
颜色：#333；
边框：1px实心#4a4a4a；
}
.textBox：悬停。滚动{
位置：绝对位置；
-moz动画：向左滚动5s线性；
-webkit动画：向左滚动5s线性；
动画：向左滚动5s线性；
转换：translateX（-9）