我正在尝试从左到右淡入文本，类似于 answer found here ，但希望文本隐藏在透明背景 div 后面，而不是示例的白色背景后面。这可以用 CSS 实现吗？原因是文本后面会有一个我想淡入的图像。
最佳答案
是的，您可以通过在 @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，你不需要它们。
关于jquery - CSS 文本宽度从左到右，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48737787/