Curated Kinetic Typography (8 Editions)

Expand

Separation

字元由中心向兩翼高速爆發分離與虛化

<div class="effect-expand">
  <span>E</span><span>x</span><span>p</span><span>a</span><span>n</span><span>d</span>
</div>
<style>
.effect-expand span { display: inline-block; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease, filter 0.9s ease; }
.effect-expand:hover span { opacity: 0; filter: blur(8px); }
.effect-expand:hover span:nth-child(1) { transform: translateX(-70px); }
.effect-expand:hover span:nth-child(2) { transform: translateX(-40px); }
.effect-expand:hover span:nth-child(3) { transform: translateX(-15px); }
.effect-expand:hover span:nth-child(4) { transform: translateX(15px); }
.effect-expand:hover span:nth-child(5) { transform: translateX(40px); }
.effect-expand:hover span:nth-child(6) { transform: translateX(70px); }
</style>

Unstable

Jitter

高頻機械微震顫與不穩定物理抖動

<div class="effect-unstable">
  <span>U</span><span>n</span><span>s</span><span>t</span><span>a</span><span>b</span><span>l</span><span>e</span>
</div>
<style>
.effect-unstable span { display: inline-block; }
.effect-unstable:hover span { animation: shiverAnim 0.25s infinite; }
.effect-unstable:hover span:nth-child(odd) { animation-direction: alternate; }
.effect-unstable:hover span:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes shiverAnim {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1.5px, 1px); }
  50% { transform: translate(-1px, -1.5px); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(-1.5px, 1px); }
}
</style>

Compression

Elastic

超彈性幾何擠壓與橫向張力拉伸

<div class="effect-compression">Compression</div>
<style>
.effect-compression {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.effect-compression:hover { transform: scaleX(1.3) scaleY(0.7); }
</style>

Distortion

Displacement

純單色奇偶交錯剪切與垂直抽搐

<div class="effect-distortion">
  <span>D</span><span>i</span><span>s</span><span>t</span><span>o</span><span>r</span><span>t</span><span>i</span><span>o</span><span>n</span>
</div>
<style>
.effect-distortion span { display: inline-block; transition: transform 0.2s ease, opacity 0.2s ease; }
.effect-distortion:hover span:nth-child(odd) { transform: translateY(-4px) skewX(20deg); opacity: 0.6; }
.effect-distortion:hover span:nth-child(even) { transform: translateY(4px) skewX(-20deg); opacity: 0.9; }
</style>

Essence

Stroke

極簡單色線框描邊向實體字形轉換

<div class="effect-essence">Essence</div>
<style>
.effect-essence {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.4);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.effect-essence:hover {
  color: #e8e8e8;
  -webkit-text-stroke: 1px transparent;
}
</style>

Revolution

3D Space

沿 X 軸依序翻轉跌入 3D 空間深處

<div class="effect-revolution">
  <span>R</span><span>e</span><span>v</span><span>o</span><span>l</span><span>u</span><span>t</span><span>i</span><span>o</span><span>n</span>
</div>
<style>
.effect-revolution span { display: inline-block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease; }
.effect-revolution:hover span { transform: rotateX(90deg) translateY(-20px); opacity: 0; }
.effect-revolution span:nth-child(1) { transition-delay: 0.00s; }
.effect-revolution span:nth-child(2) { transition-delay: 0.04s; }
.effect-revolution span:nth-child(3) { transition-delay: 0.08s; }
.effect-revolution span:nth-child(4) { transition-delay: 0.12s; }
.effect-revolution span:nth-child(5) { transition-delay: 0.16s; }
.effect-revolution span:nth-child(6) { transition-delay: 0.20s; }
.effect-revolution span:nth-child(7) { transition-delay: 0.24s; }
.effect-revolution span:nth-child(8) { transition-delay: 0.28s; }
.effect-revolution span:nth-child(9) { transition-delay: 0.32s; }
.effect-revolution span:nth-child(10) { transition-delay: 0.36s; }
</style>

Oblivion

Collapse

奇偶錯位旋轉向內收縮並徹底湮滅

<div class="effect-oblivion">
  <span>O</span><span>b</span><span>l</span><span>i</span><span>v</span><span>i</span><span>o</span><span>n</span>
</div>
<style>
.effect-oblivion span { display: inline-block; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease, filter 0.8s ease; }
.effect-oblivion:hover span {
  transform: scale(0) rotate(-90deg);
  opacity: 0;
  filter: blur(8px);
}
.effect-oblivion span:nth-child(odd) { transition-delay: 0.08s; }
.effect-oblivion span:nth-child(even) { transition-delay: 0.16s; }
</style>

Warp

Perspective

字元衝出螢幕朝鏡頭正面放大消散

<div class="effect-warp">
  <span>W</span><span>a</span><span>r</span><span>p</span>
</div>
<style>
.effect-warp span { display: inline-block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, filter 0.7s ease; }
.effect-warp:hover span { transform: translateZ(100px) scale(1.4); opacity: 0; filter: blur(8px); }
.effect-warp span:nth-child(1) { transition-delay: 0.00s; }
.effect-warp span:nth-child(2) { transition-delay: 0.05s; }
.effect-warp span:nth-child(3) { transition-delay: 0.10s; }
.effect-warp span:nth-child(4) { transition-delay: 0.15s; }
</style>