企业官网建设流程全解析

• 前端
• 文档
• 教程

本文围绕 You-need-to-know-css 仓库「动画过渡」章节中的闪烁效果文档（blink.md，对应中文版 zh-cn/blink.md），系统讲解 CSS 文本闪烁动画的两种节奏玩法——step-end硬切换式闪烁与alternate渐变呼吸式闪烁，并以此为载体深入剖析animation-direction属性的normal、reverse、alternate、alternate-reverse四个取值在循环动画中的行为差异。读完本文，你将能复现文档中的三种提示闪烁效果（info / warning / error），并能在自己的项目中根据需求正确选择动画播放方向。

animation-direction 四个取值效果对比示意图

一、animation-direction：决定动画播放方向的属性

animation-direction是 CSS 动画家族中的一员，用于设置动画在每个循环周期中的播放方向。它通常以简写属性animation的子属性形式出现，也可以独立声明，例如文档演示代码中的：

animation: .5s blink-alternate infinite; animation-direction: alternate;

其中第一行animation简写负责指定动画名称、时长与循环次数，第二行独立声明animation-direction，两者配合共同决定动画的实际呈现。

animation-direction一共接受四个取值，标准语义如下：

为了方便读者从视觉上直接理解这四个值的差异，原文档以一段从#FFFFFF变化到#b4a078并循环三次的颜色动画为例，把四个取值的效果并列展示在上方示意图中：可以直观看到，normal与reverse全程只朝单一方向推进，区别仅在于颜色的起点与终点对调；而alternate与alternate-reverse会在每次循环结束后自动掉头，二者互为反向起步。

二、四个取值逐项拆解：循环中的时序行为

理解四个取值的核心，在于把握「每次循环周期开始时，动画从哪个端点出发」。以下以「循环三次」为时间轴进行拆解：

• normal（默认值）：三次循环全部从起点（#FFFFFF）正向走向终点（#b4a078）。每个周期结束后，状态瞬间回到起点重新播放，因此衔接处存在肉眼可见的跳变。
• reverse：三次循环全部从终点反向走向起点。效果与normal完全对称，只不过颜色变化的方向颠倒。
• alternate：第 1 次循环正向（#FFFFFF→#b4a078），第 2 次循环反向（#b4a078→#FFFFFF），第 3 次循环再次正向。由于每次掉头都从上一周期的终点出发，往返过程平滑连续。
• alternate-reverse：第 1 次循环反向（#b4a078→#FFFFFF），第 2 次循环正向，第 3 次循环反向。与alternate的轨迹完全相同，只是从反向起步，因此相位恰好错开半个周期。

需要特别说明的是，alternate与alternate-reverse在视觉轨迹上是完全一致的（往返于两个端点之间），真正的差别体现在起步方向——当两个元素使用同一动画、分别设置为这两个值时，就会出现此消彼长的错位闪烁，这正是文档交互演示中 warning 与 error 两行文字的设计意图。

三、动手实现：复现文档中的三种闪烁效果

原文档通过 vuep（Vue Playground，由 libs/vuep.min.js 提供，见 index.html 的加载）内置了一个可实时运行的交互演示，其模板完整代码如下（来自 blink.md 的#blink_tlp模板，中文版见 zh-cn/blink.md 的#blink模板）：

<style> main { width: 100%; height: 329px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main p, .main span { width: 388px; padding: 3px 10px; border-radius: 5px; font-size: 14px; } p:nth-of-type(1) { background-color: #f4f4f5; color: #909399; animation: 1s blink-normal infinite step-end; } p:nth-of-type(2) { background-color: #fdf6ec; color: #e6a23c; animation: .5s blink-alternate infinite; animation-direction: alternate; } p:nth-of-type(3) { background: #fef0f0; color: #f56c6c; animation: .5s blink-alternate infinite; animation-direction: alternate-reverse; } @keyframes blink-normal { 50% { color: transparent; } } @keyframes blink-alternate { to { color: transparent; } } </style> <template> <main class="main"> <span>animation-direction: 默认<code>normal</code></span><p>info~</p> <span>animation-direction: 反向<code>alternate</code></span><p>warning~ warning~</p> <span>animation-direction: 反向交替<code>alternate-reverse</code></span><p>error~ error~ error~</p> </main> </template>

这段代码的核心结构可以拆成三部分来理解：

1. 布局与外观

外层main使用 Flexbox（display: flex+flex-direction: column）将三组「标签 + 文本」垂直居中排列；p与span统一为388px宽、带border-radius: 5px的圆角块，保证三行对齐且视觉整洁。三个p分别使用灰、橙、红三套配色（#909399、#e6a23c、#f56c6c），对应 info、warning、error 三种语义级别的提示文本。

2. 三个段落的三套动画配置

3. 两组关键帧的两种写法

@keyframes blink-normal { 50% { color: transparent; } } @keyframes blink-alternate { to { color: transparent; } }

blink-normal只声明了50%一个时间点的状态：前半周期保持元素原本的文字颜色，50%处瞬间变为transparent，配合step-end时间函数（即steps(1, end)，在关键帧到达时直接切换、不做插值渐变），形成「可见 0.5s → 透明 0.5s」的方波式闪烁。

blink-alternate只声明了to终点状态（透明），而0%的起始状态没有显式定义——此时动画会自动使用元素当前的样式值（即color: #e6a23c）作为隐式起点。配合默认的ease时间函数与alternate方向，文字在「渐隐 → 渐显」之间平滑往返，形成柔和的呼吸式闪烁。这种「只写终点、起点取当前样式」的写法，也让同一个关键帧可以复用在不同颜色的元素上。

四、源码佐证：仓库中同名关键帧的真实存在

上述两组关键帧并非只在文档演示中存在。在仓库的全局样式 assets/index.css 中，同样定义了一模一样的blink-normal与blink-alternate：

/* blink */ @keyframes blink-normal { 50% { color: transparent; } } @keyframes blink-alternate { to { color: transparent; } }

从源码结构可以推断：该仓库采用 docsify 静态文档站点方案（配置见 libs/index.js），每个.md文件即一个文档页，而blink属于侧边栏 _sidebar.md「Transition & Animations（动画过渡）」分组中的一员；同时 index.html 的 keywords 元信息中也把blink与「闪烁效果」列为站点关键词。全局样式中重复维护这两组关键帧，进一步印证了「闪烁效果」是仓库中稳定沉淀、可被其他页面复用的公共动画片段。

五、浏览器支持

animation-direction属于 CSS Animation 标准特性。原文档在「浏览器支持」小节内嵌入了 caniuse 针对css-animation的兼容性数据（覆盖未来、当前以及过去三个版本周期的数据），便于读者在真实浏览器环境中即时核验。总体上，CSS 动画在现代桌面与移动浏览器中均已得到广泛原生支持；如果你需要精确到某个浏览器版本的具体支持情况，可在当前仓库的在线演示页面中直接查看该内嵌数据。

六、实战建议：闪烁效果的正确打开方式

1. 用闪烁传达语义，而非单纯装饰

文档演示将三种闪烁分别赋予 info、warning、error 三级语义：普通频率闪烁适合「有新的提示到来」这类低干扰场景，快速交替闪烁则天然适合「需要立即关注」的告警场景。在设计时建议让闪烁节奏与信息紧急程度成正比，并保证静止状态下文字依然可读。

2. 一切的过渡皆应该由动画来完成

原文档在演示末尾特别强调了一句话：「一切的过渡皆应该由动画来完成」。这是贯穿整个仓库的交互设计理念——当元素的状态发生变化（颜色、位置、透明度等）时，应当通过transition或animation平滑呈现，而不是让状态瞬间跳变，从而提升用户对界面变化的感知与理解。

3. 关注可访问性

闪烁本质上是一种高频状态变化，部分用户（尤其是对视觉刺激敏感的用户）可能因此感到不适。在正式产品中引入闪烁动画时，业界通行做法是：为动画提供关闭开关，或借助prefers-reduced-motion媒体查询在用户开启「减少动态效果」系统设置时自动降级为静态样式；同时避免大范围、高亮度的整体闪烁。此外，文档演示采用的是「文字颜色在color与transparent之间切换」的实现，若用于承载关键信息，建议同时配合visibility/opacity或图标等非颜色信号，避免仅靠颜色传递状态。

4. 三种节奏对应三种选型

• 需要「明确的一亮一灭、节奏可控」——用blink-normal+step-end+normal（默认方向）；
• 需要「柔和的渐变呼吸、循环无缝衔接」——用只写终点的关键帧 +alternate；
• 需要「两组元素此消彼长的错位交替」——分别使用alternate与alternate-reverse，即可利用相位差制造交替闪烁。

七、延伸阅读

闪烁效果是仓库「动画过渡」章节中的一环，该分组下还有更多可复用的动画技巧，同样配有可交互演示，适合顺藤摸瓜继续深入：

• 打字效果（Typing）：基于steps()与ch单位的字符逐个输出动画；
• 弹跳效果（Bounce） 与 弹性过渡（Elastic）：基于cubic-bezier与关键帧的弹性动画；
• 抖动效果（Shake）：位移关键帧的抖动动画；
• 无缝平滑效果（Smooth） 与 延轨迹平滑效果（Circular smooth）：平滑运动相关技巧。

若想在本地查看全部演示，可按照 README.md 中 Quick start 一节的方式：安装 docsify-cli 后在仓库目录运行docsify serve，然后通过浏览器访问http://localhost:3000即可逐页体验每个技巧的实时效果。

• 前端
• 文档
• 教程