Html 使用“计算”相对于宽度的动画持续时间？

当动态添加元素且其宽度在页面加载之前未知时，是否可以使用

calc

根据元素的宽度设置

动画持续时间

我有几个“新闻标记器”，文本使用以下关键帧从右到左水平平移：

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}

这个CSS：

  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

translateX中的百分比表示正在翻译的元素。所以101%比元素本身的宽度大1%

因此，元素的宽度会影响平移速度。为了在10秒内执行动画，较宽的元素速度更快，而较短的元素速度较慢

下面是一个工作示例，它考虑了我的工作场景的一些布局需求：

.grid{
显示：网格；
网格模板列：1fr；
溢出y：自动；
溢出x：隐藏；
字号：5em；
宽度：40vw；
填充：0；
保证金：0；
}
.股票代码{
保证金：0；
溢出：隐藏；
显示：内联块；
}
.包装纸{
显示：内联块；
空白：nowrap；
动画名称：ticker；
动画持续时间：10秒；
动画计时功能：线性；
动画迭代次数：无限；
左：100%；
}
.包装纸{
右边距：3em；
}
@关键帧计时器{
0% {
转化：translateX（1%）；
能见度：可见；
}
100% {
转化：translateX（-101%）；
}
}

我会更改您的结构，以确保所有div的宽度相同。只需保留包装块元素并删除

display:grid

，即可允许内联块行为。也可以用边距替换填充

.grid{
溢出y：自动；
溢出x：隐藏；
字号：5em；
宽度：40vw；
填充：0；
保证金：0；
}
.股票代码{
保证金：0；
显示：内联块；
左边距：100%；
}
.包装纸{
空白：nowrap；
动画名称：ticker；
动画持续时间：10秒；
动画计时功能：线性；
动画迭代次数：无限；
}
.包装纸{
右边距：3em；
}
@关键帧计时器{
0% {
转化：translateX（1%）；
能见度：可见；
}
100% {
转化：translateX（-101%）；
}
}

能否添加一个完整的工作示例。“也许你解决问题的方法不对，有一种更简单的方法可以做到，”TemaniAfif说