重构博客时，又看到了 yui540

原文：自分なりのCSSアニメーションとの向き合い方
作者主页：yui540.com
X：yui540

最近在重构博客，顺手把以前写过的文章也翻了一遍。很多旧文章现在看起来都挺青涩，但也能看到当时自己在折腾什么、喜欢什么。

翻到 2018 年那篇跟着 NEET 学 CSS 动画第一课时，我突然想起来，那个作者的网站当年就已经很厉害了。

那时候他还叫 yuki540。我在译者注里写过一句：

顺便可以去看看博主的网站，设计很赞，使用了很多 SVG、CSS 动画，视觉感受一级棒。

于是我就想着，去看看这个人现在怎么样了。

结果发现他改名叫 yui540，主页也换成了新的 yui540.com。

点进去之后，嗯，还是很强。准确说，比以前更强了。

AI 都卷成这样了，他还在抠 CSS 动画

这两年大家都在卷大模型、卷 AI Agent、卷 AI 全栈，前端圈也经常给人一种感觉：今天还在写页面，明天就该把整个产品从需求到上线都交给模型跑了。

在这种环境里，再看到一个人安静地把 CSS 动画、SVG、小交互、loading、按钮反馈这些东西抠到这么细，反差还挺大的。

但这个反差让我很兴奋。

yui540 的新主页没有靠很重的 WebGL 或大型 3D 场景炫技，它更像一个被认真打磨过的作品。loading 会动，按钮会回应，许多细节处理得极其克制、自然，能看出它们经过反复调整。

这件事说起来很小，但其实很难。因为 CSS 动画如果只追求动，很容易廉价；如果追求酷，又很容易用力过猛。能做到可爱、克制、稳定，还带一点艺术感，靠的全是那些极易被忽略的微小细节。

我如何面对 CSS 动画

顺着主页，我看到了他最近写的一篇文章：《自分なりのCSSアニメーションとの向き合い方》。

标题大概可以翻成《我如何面对 CSS 动画》。

这篇文章没有走教程路线。它更像一次反思？：自己为什么一直做 CSS 动画，怎么练，怎么看待新技术，之后还想往哪里走。

他有时候是前端工程师，有时候也会承担 Web 设计、动效设计一类的工作，但自己心里的底色还是前端工程师。从 2018 年左右开始，他就在兴趣和工作里持续玩 CSS 动画。

我很喜欢他用“玩”这个词，很多东西只有熟悉得够久，才会看到那些一开始看不到的细节。

把 CSS 动画当成动画工具

文章里我觉得最重要的一点，是他对 CSS 动画的定位。

很多工程师会先把 CSS 动画看成 CSS 的一个功能、前端的一项技术能力。yui540 的看法更接近：CSS 动画就是一个动态图形工具，有点像 After Effects，只是一个用 GUI，一个用代码写关键帧。

所以他做 CSS 动画时，他更在意动画本身：

运动有没有节奏
缓动有没有重量感
交互反馈够不够舒服
元素出现和消失是否自然

这点其实挺工程师反直觉的。我们很容易盯着属性、兼容性、性能优化和语法写法。可用户最后感受到的，是这个东西用着不舒服。

CSS 动画能做的事情也确实有限。尤其考虑性能和稳定性，很多时候还是绕不开 transform 和 opacity。但限制有时候反而会逼人认真思考：只用这些基础手段，能不能做出足够好的动画？

这比单纯堆新属性难多了。

怎么练：先给自己加限制

很多人问他怎么学 CSS 动画、买了什么书。他的回答大概是：没怎么买书，也没有做那种特别像“学习”的学习，就是一直摸索，一直玩。

不过他也给了一个很具体的建议：刚开始做 CSS 动画时，尽量从 transform 和 opacity 入手。

比如：

translate
rotate
scale
skew
opacity

原因很现实：这些属性成熟，性能相对稳定，不同设备上也更容易跑出预期效果。

更重要的是，这些本来就是动态图形里最基础的运动元素。如果这些东西都玩不出变化，后面再上复杂写法，大概也只是把效果堆得更满一点。

他的练习方式也很朴素：

先给自己一个限制，比如这次只用 translate。
熟一点之后，再给自己一个主题，比如“线条”。
在限制里尽量把能想到的东西做完。
想法枯竭了，再去看动画、网站、游戏，或者观察生活里的动作。

开门时的缓冲、物体落下的回弹、熟练工匠手上的节奏，这些都可以变成动效参考。

看、拆、学、消化，这个就不用多说了（

新技术很好，但别过分追求

这一段我也挺赞同。

作为前端，看到 View Transition、animation-timeline 这类新能力，很难不想试试。新的属性、新的 at-rule、新的浏览器能力，当然都值得关注。

yui540 提醒的是另一件事：CSS 动画的目标始终是做出一个好的动画，使用最新写法只是手段。

尤其工作里还要面对真实设备、浏览器兼容、性能和稳定性。有时候为了让动效在更多环境下可靠运行，就是得用老一点、普通一点、看起来没那么酷的写法。

工具会变。真正留下来的，还是你对运动、节奏、反馈的判断。

这句话放在今天也挺适合。AI 写代码越来越强，很多以前要手敲半天的东西，现在可能一句 prompt 就能生成个大概。可生成出来的东西到底好不好，还是需要人去判断。

代码动起来这件事，本来就挺神奇

文章后面有一段，他说 CSS 动画写久了之后，可能会慢慢习惯“写几行 CSS，页面就动起来”这件事。

但认真想想，这件事其实挺神奇。

你写下几十行、几百行文字，浏览器就在各种设备上实时渲染出运动。如果它和交互绑定，用户点一下、摸一下，页面就马上回应。

我以前折腾 Service Worker、博客系统、各种前端小功能的时候，也经常有这种感觉。明明只是写了一堆代码，突然有一天它能跑、能缓存、能响应、能动起来，那一瞬间还是会觉得：见证奇迹（

一个页面会动，一个按钮会在按下时给出刚刚好的反馈，一个多年后还能打开的旧链接，这些东西平时很容易被当成理所当然。只有重新翻出来的时候，才会发现它们其实挺有趣。

他之后想做什么

文章最后，yui540 说自己现在也开始把视野从 CSS 动画扩展到其他技术上。

以前他可能会很在意浏览器渲染、纯 CSS、以及写起来能不能完全像 CSS 动画。现在他开始觉得，只要动画思维和代码组织方式还在，平台和写法可以没那么死。

比如他开始用 React Native Reanimated，也是这个原因。

我觉得这个变化挺好。长期做一件事的人，最怕的可能就是把自己困在某个标签里。CSS 动画很重要，但通过 CSS 动画练出来的节奏感、关键帧思维、代码组织方式，不会因为换个平台就消失。

既然还想做，那就继续做下去吧。能一直做自己愿意钻进去的东西，本来就不容易。

结束与起始之界