语义动画

当被问及用于构建 CSS 动画的新工具（例如 Edge）时，我最近说：

在 CSS 动画出现之前，用于样式的空 div 是非语义的，是一个坏主意，现在仍然是一个坏主意。

我坚持这一点。 我觉得我们作为行业已经走得很远，让每个人都接受了语义标记。 做到这一点，您将收获速度、可访问性、可维护性和 SEO 等方面的巨大回报。

然后，一种新的闪亮事物出现了，我们所做的第一件事就是开始放弃我们自己的规则。 “哦，我可以让一只鸟飞过屏幕‽” 给我再订几块空 div！ 我当然对此有罪。 当您这样做时，它感觉不像是一件大事，尤其是在适度的情况下。

但是 CSS 动画将继续存在。 关于我们应该使用它们做什么类型的事情、太多是多少、如何以语义的方式处理它们、如何提供备用内容等方面，将出现一般的最佳实践。 我想我会分享一个我想到的小想法。

让我们考虑一下动画对设计的贡献。 它们可以赋予它情绪。 它们可以赋予它态度。 与设计的其他方面一样，它们会影响用户对该页面的感受。 但它们只对有视力的人做这些事情。 空 div 对无视力用户没有任何作用。 它只是一堆无用的东西。

<div class="moon">
  <!-- I offer nothing to non-sighted users -->
</div>

如果我们将这个空 div 替换掉，尝试为无视力用户实现我们为有视力用户实现的相同效果，会怎样？ 只需将描述性文本放入这些 div 中，我们就可以做到。 类似于图像的 alt 标签，但实际的内联内容旨在以与动画被看到/享受相同的方式被读取/享受。

也许我们的动画是关于月亮升起，随着它升起，天空和地面变成黑色。 我们需要两个元素来完成我们的动画，所以它们可能包含 CCR 的 Bad Moon Rising 的歌词

<div class="moon">
   I see a bad moon rising
   I see trouble on the way
</div>

<div class="ground">
   I see earthquakes and lightnin’
   I see bad times today
</div>

CSS 将此文本隐藏起来，并调用 关键帧动画

.ground, .moon {
   text-indent: -9999px;
   overflow: hidden; /* text-indent without this can cause choppy animation */
}

.ground {
   -webkit-animation: ground-to-black 5s ease;
   -moz-animation:    ground-to-black 5s ease;
   -o-animation:      ground-to-black 5s ease;
   animation:         ground-to-black 5s ease;
}

.moon {
   -webkit-animation: rising-moon 5s ease;
   -moz-animation:    rising-moon 5s ease;
   -o-animation:      rising-moon 5s ease;
   animation:         rising-moon 5s ease;
}

/* Plus various keyframe declarations */

查看演示

请注意那些关键帧动画的名称。 这是“语义动画”中需要讨论的另一个话题。 下次再说。

这段文本可以是与动画相关的任何内容。 它可以字面地描述动画。 它可以是一首能激发与动画相同情感的诗歌。 它可以是一个 <audio> 元素。

哇，别太花哨了，设计师小子。

我不使用屏幕阅读器，所以我不能决定这是否是一个好主意。 我想，已经有足够多的东西要处理了，尽管有好的意图，但这可能只是通往“真实内容”道路上的另一个障碍。

我想这就像世界上其他所有事情一样：取决于情况。