我试图在从左到右的文本中褪色，类似于此处的答案，但希望文本隐藏在透明背景div后面，而不是示例的白色背景。CSS是否可以？原因是我想淡入的文本背后会有图像。
是的，您可以通过在 @keyframes上从0到100％设置width(例如在您的问题中(以显示文本的各个部分。
小型演示示例可以显示它是如何工作的。单击零：
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>P.S。
JS仅进行测试。通过@keyframes，您不需要它们。