使用计算相对于宽度的动画持续时间？答案

【问题标题】：Animation duration relative to width using calc?使用计算相对于宽度的动画持续时间？
【发布时间】：2019-05-16 08:55:53
【问题描述】：

当动态添加元素并且在页面加载之前它的宽度未知时，是否可以使用calc 相对于元素的宽度设置animation-duration？

我有几个“新闻行情”，文本可以使用这个关键帧从右到左无限地水平翻译：

@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{
  display: grid;
  grid-template-columns: 1fr;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 5em;
  width: 40vw;
  padding:0;
  margin:0;
}
.ticker {
  margin: 0;
  overflow: hidden;
  display: inline-block;
}

.wrapper {
  display: inline-block;
  white-space: nowrap;
  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  padding-left: 100%;
}

.wrapper a {
  margin-right: 3em;
}

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

<ul class="grid">
  <li class="ticker">
    <div class="wrapper">
      <a href="">This now</a>
      <a href="">Stunning example</a>
    </div>
    <div class="wrapper">
      <a href="">Pan</a>
    </div> 
    <div class="wrapper">
      <a href="">Terribly known or unknown or perhaps just new</a>
      <a href="">In times of war every hole is a trench</a>
    </div>
  </li>
</ul>

我想为动画持续时间提供一个相对于元素宽度的值，这样我就可以让所有代码以相同的速度移动而不管宽度。

我想也许我可以使用calc() 将 10 乘以或除以元素宽度。不幸的是，这里元素的宽度是动态的，因为它是由元素内的字符串定义的，并且在页面加载之前该字符串是未知的。

谢谢

【问题讨论】：

您能否添加一个完整的工作示例。可能您以错误的方式解决问题，并且有一种更简单的方法可以做到这一点
完成，@TemaniAfif

标签： html css css-animations

【解决方案1】：

我会更改您的结构以确保所有 div 的宽度相同。您只需要保留包装块元素并删除 display:grid 即可允许内联块行为。同时用边距替换填充。

.grid{
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 5em;
  width: 40vw;
  padding:0;
  margin:0;
}
.ticker {
  margin: 0;
  display: inline-block;
  margin-left:100%;
}

.wrapper {
  white-space: nowrap;
  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wrapper a {
  margin-right: 3em;
}

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

<ul class="grid">
  <li class="ticker">
    <div class="wrapper">
      <a href="">This now</a>
      <a href="">Stunning example</a>
    </div>
    <div class="wrapper">
      <a href="">Pan</a>
    </div> 
    <div class="wrapper">
      <a href="">Terribly known or unknown or perhaps just new</a>
      <a href="">In times of war every hole is a trench</a>
    </div>
  </li>
</ul>

【讨论】：