类似于旋转木马动画的文字动画太过分了

Question

我在codepen上发现了一个我想要复制的动画但是动画太过分了。我有一个类似问题的旋转木马并添加......

ul {
  margin: 0;
  padding: 0;
}

......修好了。然而，在这种情况下添加会使动画更糟糕，即使我向除了示例中使用的内容之外的所有内容添加0边距和填充。

Fiddle

<div class='content'>
  <div class='visible'>
    <p>
      Hello
    </p>
    <ul>
      <li>world !</li>
      <li>Bob !</li>
      <li>users !</li>
      <li>everybody !</li>
    </ul>
  </div>
</div>

Answer 1

你的最后一行太长了。感叹号包裹到下一行。这使得文本内容长5行，仍然像4行一样动画，因此每个动画步骤的行高为行高的1.25倍。

我建议添加ul {white-space: nowrap;}。这将强制每一行在一行上。如果文本不合适，框会变得更宽，如果有的话。

Updated fiddle