如何为网页所有文本添加淡入动画？无需逐个选择HTML元素

问题核心 #

无需逐个指定HTML元素（如h1, p, a, li）来添加淡入动画，同时解决<div>中直接文本的动画生效问题。

解决方案 #

1. 批量给文本类元素添加动画 #

使用CSS的:is()选择器结合常见文本元素，一次性选中所有目标标签，避免逐个列举：

:is(h1, h2, h3, p, a, li, span, svg text) {
  animation: text-appear 2s linear;
}

如果需要覆盖更多元素，也可以用通用选择器*，同时排除不需要动画的元素（如图片、按钮等）：

*:not(img, button, input) {
  animation: text-appear 2s linear;
}

2. 处理<div>中的直接文本 #

CSS无法直接选择匿名文本节点（即<div>内未被标签包裹的文字），有两种可行处理方式：

• 方法一：包裹匿名文本
  将<div>里的直接文本放入<span>标签，即可被上述选择器选中并应用动画：

  <div>
    <span>DIV TEXT, now has fade in</span>
    <!-- 其他子元素 -->
  </div>
  

• 方法二：给父元素添加动画（慎用）
  直接给<div>添加动画，但会让<div>内所有子元素同步触发动画，可能导致子元素动画重复：

  div {
    animation: text-appear 2s linear;
  }
  

修改后的完整代码示例 #

CSS代码 #

div {
  background: green;
  padding: 1rem;
}

@keyframes text-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

:is(h1, p, a, span, svg text) {
  animation: text-appear 2s linear;
}

HTML代码 #

<div>
  <span>DIV TEXT, now has fade in</span>
  <h1>H1</h1>
  <h1>H1</h1>
  <p>P, now has fade in</p>
  <a>A, now has fade in</a>

  <svg viewBox="0 0 200 38">
    <text x="50%" y="50%" fill="red">SVG TEXT</text>
  </svg>
</div>

内容的提问来源于stack exchange，提问作者jack