CSS 文本宽度从左到右答案

【问题标题】：CSS text width left to rightCSS 文本宽度从左到右
【发布时间】：2018-07-22 02:38:42
【问题描述】：

我正在尝试从左到右淡入文本，类似于answer found here，但希望文本隐藏在透明背景 div 后面，而不是示例的白色背景。这可能与 CSS 吗？原因是文本后面会有一个我想淡入的图像。

【问题讨论】：

【解决方案1】：

是的，您可以通过在 @keyframes 上将 width 从 0 设置为 100%（如您的问题中的示例）来显示文本的各个部分。

供您展示的小型演示示例是它的工作原理。点击零：

stripe.onclick = function() {
  var sec = new Date().getSeconds() % 10;
  stripe.classList.add('animate');
  digit.classList.add('animate');
  console.log();
};

	#digit {
	  width: 20px;
	  overflow: hidden;
	  font: 32px "Courier New", monospace;
	  cursor: pointer;
	  transition: 2s linear width;
	}

	#stripe {
	  width: 20px;
	  transition: 2s linear width;		
	}

	#stripe.animate {
	  width: 200px;
	  transition: 2s linear width;
	}

	#digit.animate {
	  width: 200px;
	  transition: 2s linear width;
	}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <style>
  </style>
</head>
<body>
	
  <div id="digit"><span id="stripe">0123456789</span></div>

<script>
</script>
</body>
</html>

附言

JS 仅用于测试。 @keyframes 你不需要它们。

【讨论】：

谢谢你，这很好！请注意，如果 #stripe 文本有空格，请使用 white-space: no-wrap 以防止单词换行到下一行。