100 Text Animations (Kawai Design)

项目概述

100 Text Animations 是由日本知名设计师川合卓也 (KAWAI DESIGN) 打造的交互式文字动效精选库。收录了 100 种风格各异的纯前端文本动效，涵盖渐变浮现、字母错落打散、波浪摆动、3D 翻转、霓虹闪烁以及经典打字机等丰富视觉形态，完全基于纯 CSS 和原生 JavaScript 构建，无需引入任何庞大的外部动效框架。

核心特性

• 🔤 100 种开箱即用的文本动效模式：涵盖微质感文字淡入、逐字弹性弹跳、故障风 (Glitch)、霓虹流光与 3D 旋转等全方位文字动态表达。
• ⚡ 实时自定义文案预览：顶部提供全局文本输入框，输入任意自定义文字即可实时预览全部 100 种动效在实际文案下的渲染效果。
• 📋 零依赖一键代码复制：点击任意动效卡片即可直接复制完整 HTML、CSS @keyframes 规则与 JS 代码，真正实现即粘即用 (Copy & Paste)。
• ⭐ Picked 收藏与筛选机制：在浏览过程中一键收藏心仪的动效，便于集中横向比对并最终敲定技术方案。

快速上手与示例代码

<!-- 基础示例：逐字错落浮现动效 -->
<h1 class="text-wave">
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

.text-wave span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: textWave 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.text-wave span:nth-child(1) { animation-delay: 0.1s; }
.text-wave span:nth-child(2) { animation-delay: 0.2s; }
.text-wave span:nth-child(3) { animation-delay: 0.3s; }

@keyframes textWave {
  to { opacity: 1; transform: translateY(0); }
}

技术选型建议与适用场景

• 落地页 Hero 标题与 Banner：无需引入重型动效库即可为网站主标题、活动标语和作品集增加极具质感的动态表现力。
• 零依赖与高性能：纯 CSS @keyframes 运行在浏览器合成层 (Compositor Thread)，完全零额外包体积负担，适配 React、Vue、Astro、Next.js 或静态 HTML 站点。