← 返回 Notes

L-One Motion Library｜文字动效图书馆

一个可复制的文字动效素材库。每张卡片展示一种循环播放的标题动画，并提供独立 HTML 与嵌入组件两种网页代码。

总计 64 个动效 四列排版 代码默认折叠 独立 HTML 可直接预览；嵌入组件可加入现有网页。
Motion Library01
标题文字动画
Title Motion Lib
Scanline 扫描线入场

扫描线入场采用clip-path（裁切路径）+ 复制文字层 + 伪元素扫描线。

01 · Scanline / 扫描线入场 点击展开代码 展开
clip-path（裁切路径）+ 复制文字层 + 伪元素扫描线 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scanline / 扫描线入场</title>
  <style>
  .l1-motion-01{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-01-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-01-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-01-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-01-split .l1-motion-01-title span,
  .l1-motion-01-split .l1-motion-01-subtitle span{display:inline-block;}

   .l1-motion-01-title,
   .l1-motion-01-subtitle{position:relative;color:rgba(52,56,61,.18);overflow:hidden;}

   .l1-motion-01-title::before,
   .l1-motion-01-subtitle::before{content:attr(data-text);position:absolute;inset:0;color:#34383d;clip-path:inset(0 100% 0 0);animation:l1-motion-01-scanReveal 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-01-title::after,
   .l1-motion-01-subtitle::after{content:"";position:absolute;top:-35%;bottom:-35%;left:-12%;width:2px;background:linear-gradient(to bottom,transparent,#34383d,transparent);box-shadow:0 0 18px rgba(52,56,61,.28);animation:l1-motion-01-scanLine 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-01-subtitle::before,
   .l1-motion-01-subtitle::after{animation-delay:110ms;}

  @keyframes l1-motion-01-scanReveal{0%{clip-path:inset(0 100% 0 0)}42%,72%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}

  @keyframes l1-motion-01-scanLine{0%{left:-12%;opacity:0}8%{opacity:1}42%{left:108%;opacity:1}60%,100%{left:108%;opacity:0}}
  </style>
</head>
<body>
  <div class="l1-motion-01">

  <div class="l1-motion-01-box">
    <div class="l1-motion-01-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-01-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library02
标题文字动画
Title Motion Lib
Crop Cut 裁切滑入

裁切滑入采用overflow:hidden（隐藏溢出）+ translateY（垂直位移）。

02 · Crop Cut / 裁切滑入 点击展开代码 展开
overflow:hidden（隐藏溢出）+ translateY（垂直位移） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Crop Cut / 裁切滑入</title>
  <style>
  .l1-motion-02{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-02-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-02-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-02-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-02-split .l1-motion-02-title span,
  .l1-motion-02-split .l1-motion-02-subtitle span{display:inline-block;}

   .l1-motion-02-box{overflow:hidden;padding:2px 0;}

   .l1-motion-02-title,
   .l1-motion-02-subtitle{animation:l1-motion-02-cropLoop 2800ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-02-subtitle{animation-delay:100ms;}

  @keyframes l1-motion-02-cropLoop{0%{transform:translateY(110%);opacity:.1}36%,72%{transform:translateY(0);opacity:1}100%{transform:translateY(-110%);opacity:.1}}
  </style>
</head>
<body>
  <div class="l1-motion-02">

  <div class="l1-motion-02-box">
    <div class="l1-motion-02-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-02-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library03
标题文字动画
Title Motion Lib
Step Rise 阶梯上升

阶梯上升采用拆字 span（字符拆分）+ stagger delay（错峰延迟）。

03 · Step Rise / 阶梯上升 点击展开代码 展开
拆字 span（字符拆分）+ stagger delay（错峰延迟） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Step Rise / 阶梯上升</title>
  <style>
  .l1-motion-03{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-03-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-03-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-03-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-03-split .l1-motion-03-title span,
  .l1-motion-03-split .l1-motion-03-subtitle span{display:inline-block;}

   .l1-motion-03-title span,
   .l1-motion-03-subtitle span{animation:l1-motion-03-stepLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*38ms);}

  @keyframes l1-motion-03-stepLoop{0%{opacity:0;transform:translateY(30px)}30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-22px)}}
  </style>
</head>
<body>
  <div class="l1-motion-03">

  <div class="l1-motion-03-box l1-motion-03-split">
    <div class="l1-motion-03-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-03-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library04
标题文字动画
Title Motion Lib
Stretch 横向拉伸

横向拉伸采用scaleX（横向缩放）+ overshoot（轻微回弹）。

04 · Stretch / 横向拉伸 点击展开代码 展开
scaleX（横向缩放）+ overshoot（轻微回弹） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stretch / 横向拉伸</title>
  <style>
  .l1-motion-04{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-04-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-04-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-04-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-04-split .l1-motion-04-title span,
  .l1-motion-04-split .l1-motion-04-subtitle span{display:inline-block;}

   .l1-motion-04-title,
   .l1-motion-04-subtitle{display:block;transform-origin:center;animation:l1-motion-04-stretchLoop 2800ms cubic-bezier(.12,.78,.16,1) infinite;}

  @keyframes l1-motion-04-stretchLoop{0%{opacity:.12;transform:scaleX(.08);filter:blur(1px)}36%{opacity:1;transform:scaleX(1.08);filter:blur(0)}50%,72%{opacity:1;transform:scaleX(1)}100%{opacity:.12;transform:scaleX(.08);filter:blur(1px)}}
  </style>
</head>
<body>
  <div class="l1-motion-04">

  <div class="l1-motion-04-box">
    <div class="l1-motion-04-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-04-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library05
标题文字动画
Title Motion 00
Count Up 数字计数

数字计数采用requestAnimationFrame（逐帧函数）+ easeOut（缓出）。

05 · Count Up / 数字计数 点击展开代码 展开
requestAnimationFrame（逐帧函数）+ easeOut（缓出） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Count Up / 数字计数</title>
  <style>
  .l1-motion-05{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-05-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-05-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-05-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-05-split .l1-motion-05-title span,
  .l1-motion-05-split .l1-motion-05-subtitle span{display:inline-block;}

   .l1-motion-05-subtitle{font-family:Arial, Helvetica, sans-serif;}

   .l1-motion-05-title{animation:l1-motion-05-settleText 2600ms ease-in-out infinite;}

  @keyframes l1-motion-05-settleText{0%{opacity:.2;transform:translateY(12px)}35%,72%{opacity:1;transform:translateY(0)}100%{opacity:.2;transform:translateY(-10px)}}
  </style>
</head>
<body>
  <div class="l1-motion-05">

  <div class="l1-motion-05-box l1-motion-05-count">
    <div class="l1-motion-05-title">标题文字动画</div>
    <div class="l1-motion-05-subtitle">Title Motion <span class="l1-motion-05-counter" data-target="64">00</span></div>
  </div>
  </div>
  <script>
  (() => {
    const root = document.querySelector(".l1-motion-05");
    if (!root) return;
    const counters = root.querySelectorAll(".l1-motion-05-counter");
    function runCount() {
      counters.forEach((element) => {
        const target = Number(element.dataset.target || 0);
        const duration = 850;
        const start = performance.now();
        function tick(now) {
          const progress = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - progress, 3);
          element.textContent = String(Math.round(target * eased)).padStart(2, "0");
          if (progress < 1) requestAnimationFrame(tick);
        }
        element.textContent = "00";
        requestAnimationFrame(tick);
      });
    }
    runCount();
    window.setInterval(runCount, 2600);
  })();
  </script>
</body>
</html>
Motion Library06
标题文字动画
Title Motion Lib
Page Turn 翻页显现

翻页显现采用perspective（透视）+ rotateY（Y轴翻转）。

06 · Page Turn / 翻页显现 点击展开代码 展开
perspective（透视）+ rotateY（Y轴翻转） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Turn / 翻页显现</title>
  <style>
  .l1-motion-06{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-06-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-06-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-06-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-06-split .l1-motion-06-title span,
  .l1-motion-06-split .l1-motion-06-subtitle span{display:inline-block;}

   .l1-motion-06-title,
   .l1-motion-06-subtitle{display:block;transform-origin:left center;animation:l1-motion-06-pageLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-06-subtitle{animation-delay:90ms;}

  @keyframes l1-motion-06-pageLoop{0%{opacity:.05;transform:perspective(620px) rotateY(-88deg);filter:blur(2px)}36%{opacity:1;transform:perspective(620px) rotateY(6deg);filter:blur(0)}50%,72%{opacity:1;transform:perspective(620px) rotateY(0)}100%{opacity:.05;transform:perspective(620px) rotateY(82deg);filter:blur(2px)}}
  </style>
</head>
<body>
  <div class="l1-motion-06">

  <div class="l1-motion-06-box">
    <div class="l1-motion-06-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-06-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library07
标题文字动画
Title Motion Lib
Gridlock 网格锁定

网格锁定采用字符随机偏移 + translate 归位 + 网格背景。

07 · Gridlock / 网格锁定 点击展开代码 展开
字符随机偏移 + translate 归位 + 网格背景 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gridlock / 网格锁定</title>
  <style>
  .l1-motion-07{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-07-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-07-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-07-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-07-split .l1-motion-07-title span,
  .l1-motion-07-split .l1-motion-07-subtitle span{display:inline-block;}

   .l1-motion-07,
  .l1-motion-07-motion-stage{background-image:linear-gradient(rgba(52,56,61,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(52,56,61,.035) 1px,transparent 1px);background-size:24px 24px;}

   .l1-motion-07-title span,
   .l1-motion-07-subtitle span{animation:l1-motion-07-gridLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*35ms);}

  @keyframes l1-motion-07-gridLoop{0%{opacity:0;transform:translate(calc((var(--i) - 8)*5px),calc((8 - var(--i))*4px)) rotate(8deg)}36%,72%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc((8 - var(--i))*4px),calc((var(--i) - 8)*3px)) rotate(-6deg)}}
  </style>
</head>
<body>
  <div class="l1-motion-07">

  <div class="l1-motion-07-box l1-motion-07-split">
    <div class="l1-motion-07-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-07-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library08
标题文字动画
Title Motion Lib
Ink Spread 墨迹扩散

墨迹扩散采用背后 blob（墨迹块）+ scale（扩散）+ opacity（透明度）。

08 · Ink Spread / 墨迹扩散 点击展开代码 展开
背后 blob（墨迹块）+ scale（扩散）+ opacity（透明度） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ink Spread / 墨迹扩散</title>
  <style>
  .l1-motion-08{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-08-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-08-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-08-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-08-split .l1-motion-08-title span,
  .l1-motion-08-split .l1-motion-08-subtitle span{display:inline-block;}

   .l1-motion-08-box::before{content:"";position:absolute;left:50%;top:50%;width:245px;height:92px;border-radius:48% 55% 45% 58%;background:linear-gradient(135deg,rgba(52,56,61,.08),rgba(52,56,61,.025));transform:translate(-50%,-50%) scale(.08);z-index:-1;animation:l1-motion-08-inkLoop 3000ms cubic-bezier(.15,.72,.16,1) infinite;}

   .l1-motion-08-title,
   .l1-motion-08-subtitle{animation:l1-motion-08-inkText 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-08-inkLoop{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}34%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}

  @keyframes l1-motion-08-inkText{0%,18%{opacity:0;transform:translateY(10px)}42%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
  </style>
</head>
<body>
  <div class="l1-motion-08">

  <div class="l1-motion-08-box">
    <div class="l1-motion-08-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-08-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library09
标题文字动画
Title Motion Lib
Underline 下划线强调

下划线强调采用scaleX（线条生长）+ title delay（标题延迟）。

09 · Underline / 下划线强调 点击展开代码 展开
scaleX（线条生长）+ title delay（标题延迟） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Underline / 下划线强调</title>
  <style>
  .l1-motion-09{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-09-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-09-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-09-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-09-split .l1-motion-09-title span,
  .l1-motion-09-split .l1-motion-09-subtitle span{display:inline-block;}

   .l1-motion-09-box::after{content:"";display:block;height:2px;background:#34383d;margin:12px auto 0;width:72%;transform-origin:left;animation:l1-motion-09-lineLoop 2800ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-09-title,
   .l1-motion-09-subtitle{animation:l1-motion-09-titleLift 2800ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-09-lineLoop{0%{transform:scaleX(0);opacity:0}30%,72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0;transform-origin:right}}

  @keyframes l1-motion-09-titleLift{0%,18%{opacity:0;transform:translateY(16px)}38%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}
  </style>
</head>
<body>
  <div class="l1-motion-09">

  <div class="l1-motion-09-box">
    <div class="l1-motion-09-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-09-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library10
标题文字动画
Title Motion Lib
Cursor Locate 光标定位

光标定位采用光标位移 + 字符 blur（模糊）到清晰。

10 · Cursor Locate / 光标定位 点击展开代码 展开
光标位移 + 字符 blur（模糊）到清晰 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cursor Locate / 光标定位</title>
  <style>
  .l1-motion-10{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-10-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-10-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-10-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-10-split .l1-motion-10-title span,
  .l1-motion-10-split .l1-motion-10-subtitle span{display:inline-block;}

   .l1-motion-10-title span,
   .l1-motion-10-subtitle span{animation:l1-motion-10-charLock 3000ms ease-out infinite;animation-delay:calc(var(--i)*36ms);}

   .l1-motion-10-box::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:#34383d;animation:l1-motion-10-cursorSweep 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-10-cursorSweep{0%{opacity:0;left:-22px}12%{opacity:1}44%,72%{opacity:1;left:100%}90%,100%{opacity:0;left:105%}}

  @keyframes l1-motion-10-charLock{0%{opacity:.1;filter:blur(4px);transform:translateY(3px)}34%,72%{opacity:1;filter:blur(0);transform:translateY(0)}100%{opacity:.1;filter:blur(4px);transform:translateY(-3px)}}
  </style>
</head>
<body>
  <div class="l1-motion-10">

  <div class="l1-motion-10-box l1-motion-10-split">
    <div class="l1-motion-10-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-10-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library11
标题文字动画
Title Motion Lib
FOLD 折叠入场

折叠入场采用rotateX / scaleY（折叠）+ perspective（透视）。

11 · FOLD / 折叠入场 点击展开代码 展开
rotateX / scaleY（折叠）+ perspective（透视） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FOLD / 折叠入场</title>
  <style>
  .l1-motion-11{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-11-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-11-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-11-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-11-split .l1-motion-11-title span,
  .l1-motion-11-split .l1-motion-11-subtitle span{display:inline-block;}

   .l1-motion-11-title,
   .l1-motion-11-subtitle{display:block;transform-origin:center bottom;animation:l1-motion-11-foldLoop 3000ms cubic-bezier(.2,.8,.2,1) infinite;}

  @keyframes l1-motion-11-foldLoop{0%{opacity:0;transform:perspective(560px) rotateX(88deg) scaleY(.2)}36%,72%{opacity:1;transform:perspective(560px) rotateX(0) scaleY(1)}100%{opacity:0;transform:perspective(560px) rotateX(-70deg) scaleY(.25)}}
  </style>
</head>
<body>
  <div class="l1-motion-11">

  <div class="l1-motion-11-box">
    <div class="l1-motion-11-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-11-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library12
标题文字动画
Title Motion Lib
SPIRAL 螺旋入场

螺旋入场采用字符拆分 + rotate（旋转）+ translate（位移）。

12 · SPIRAL / 螺旋入场 点击展开代码 展开
字符拆分 + rotate（旋转）+ translate（位移） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SPIRAL / 螺旋入场</title>
  <style>
  .l1-motion-12{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-12-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-12-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-12-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-12-split .l1-motion-12-title span,
  .l1-motion-12-split .l1-motion-12-subtitle span{display:inline-block;}

   .l1-motion-12-title span,
   .l1-motion-12-subtitle span{animation:l1-motion-12-orbitLoop 3400ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*36ms);}

  @keyframes l1-motion-12-orbitLoop{0%{opacity:0;transform:rotate(calc(var(--i)*22deg)) translate(80px) rotate(calc(var(--i)*-22deg)) scale(.6)}42%,72%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:rotate(calc(var(--i)*-18deg)) translate(72px) rotate(calc(var(--i)*18deg)) scale(.6)}}
  </style>
</head>
<body>
  <div class="l1-motion-12">

  <div class="l1-motion-12-box l1-motion-12-split">
    <div class="l1-motion-12-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-12-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library13
标题文字动画
Title Motion Lib
LIQUID 液体流动

液体流动采用scaleX（横条生长）+ border-radius（圆角液体）+ blur（柔化）。

13 · LIQUID / 液体流动 点击展开代码 展开
scaleX（横条生长）+ border-radius（圆角液体）+ blur（柔化） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LIQUID / 液体流动</title>
  <style>
  .l1-motion-13{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-13-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-13-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-13-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-13-split .l1-motion-13-title span,
  .l1-motion-13-split .l1-motion-13-subtitle span{display:inline-block;}

   .l1-motion-13-box::after{content:"";display:block;height:8px;border-radius:999px;margin:12px auto 0;width:210px;background:linear-gradient(90deg,rgba(52,56,61,.12),rgba(52,56,61,.38),rgba(52,56,61,.12));transform-origin:left;animation:l1-motion-13-liquidBar 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-13-title,
   .l1-motion-13-subtitle{animation:l1-motion-13-liquidText 3000ms ease-in-out infinite;}

  @keyframes l1-motion-13-liquidBar{0%{opacity:.2;transform:scaleX(0);filter:blur(3px)}36%,72%{opacity:1;transform:scaleX(1);filter:blur(0)}100%{opacity:.2;transform:scaleX(0);filter:blur(3px);transform-origin:right}}

  @keyframes l1-motion-13-liquidText{0%,100%{filter:blur(1px);transform:translateY(3px)}36%,72%{filter:blur(0);transform:translateY(0)}}
  </style>
</head>
<body>
  <div class="l1-motion-13">

  <div class="l1-motion-13-box">
    <div class="l1-motion-13-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-13-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library14
标题文字动画
Title Motion Lib
STAMP 印章落版

印章落版采用scale（缩放冲击）+ border（边框）+ opacity（显现）。

14 · STAMP / 印章落版 点击展开代码 展开
scale（缩放冲击）+ border（边框）+ opacity（显现） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>STAMP / 印章落版</title>
  <style>
  .l1-motion-14{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-14-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-14-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-14-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-14-split .l1-motion-14-title span,
  .l1-motion-14-split .l1-motion-14-subtitle span{display:inline-block;}

   .l1-motion-14-box{padding:12px 18px;outline:2px solid rgba(52,56,61,.22);animation:l1-motion-14-stampLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-14-stampLoop{0%{opacity:0;transform:scale(1.6) rotate(-3deg);filter:blur(2px)}24%{opacity:1;transform:scale(.9) rotate(1deg);filter:blur(0)}38%,72%{transform:scale(1) rotate(0);opacity:1}100%{opacity:0;transform:scale(.96) translateY(16px)}}
  </style>
</head>
<body>
  <div class="l1-motion-14">

  <div class="l1-motion-14-box">
    <div class="l1-motion-14-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-14-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library15
标题文字动画
Title Motion Lib
TICKER TICKER 跑马字幕

跑马字幕采用marquee（横向滚动）+ mask（边缘遮罩）。

15 · TICKER TICKER / 跑马字幕 点击展开代码 展开
marquee（横向滚动）+ mask（边缘遮罩） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TICKER TICKER / 跑马字幕</title>
  <style>
  .l1-motion-15{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-15-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-15-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-15-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-15-split .l1-motion-15-title span,
  .l1-motion-15-split .l1-motion-15-subtitle span{display:inline-block;}

   .l1-motion-15-box{max-width:260px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);}

   .l1-motion-15-title,
   .l1-motion-15-subtitle{display:inline-block;animation:l1-motion-15-tickerLoop 3400ms linear infinite;}

  @keyframes l1-motion-15-tickerLoop{0%{transform:translateX(40%)}100%{transform:translateX(-72%)}}
  </style>
</head>
<body>
  <div class="l1-motion-15">

  <div class="l1-motion-15-box">
    <div class="l1-motion-15-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-15-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library16
标题文字动画
Title Motion Lib
AROUND CENTER 环绕聚合

环绕聚合采用圆周排布 + rotate（旋转）+ center lock（中心锁定）。

16 · AROUND CENTER / 环绕聚合 点击展开代码 展开
圆周排布 + rotate（旋转）+ center lock（中心锁定） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AROUND CENTER / 环绕聚合</title>
  <style>
  .l1-motion-16{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-16-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-16-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-16-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-16-split .l1-motion-16-title span,
  .l1-motion-16-split .l1-motion-16-subtitle span{display:inline-block;}

   .l1-motion-16-title span,
   .l1-motion-16-subtitle span{animation:l1-motion-16-orbitLoop 3400ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*36ms);}

  @keyframes l1-motion-16-orbitLoop{0%{opacity:0;transform:rotate(calc(var(--i)*22deg)) translate(80px) rotate(calc(var(--i)*-22deg)) scale(.6)}42%,72%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:rotate(calc(var(--i)*-18deg)) translate(72px) rotate(calc(var(--i)*18deg)) scale(.6)}}
  </style>
</head>
<body>
  <div class="l1-motion-16">

  <div class="l1-motion-16-box l1-motion-16-split">
    <div class="l1-motion-16-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-16-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library17
标题文字动画
Title Motion Lib
SHUTTER 快门切开

快门切开采用repeating-linear-gradient（条纹遮罩）+ clip-path（裁切）。

17 · SHUTTER / 快门切开 点击展开代码 展开
repeating-linear-gradient（条纹遮罩）+ clip-path（裁切） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SHUTTER / 快门切开</title>
  <style>
  .l1-motion-17{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-17-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-17-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-17-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-17-split .l1-motion-17-title span,
  .l1-motion-17-split .l1-motion-17-subtitle span{display:inline-block;}

   .l1-motion-17-title,
   .l1-motion-17-subtitle{clip-path:inset(0 100% 0 0);animation:l1-motion-17-shutterLoop 3100ms steps(8,end) infinite;}

  @keyframes l1-motion-17-shutterLoop{0%{clip-path:inset(0 100% 0 0);opacity:.2}36%,72%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 100%);opacity:.2}}
  </style>
</head>
<body>
  <div class="l1-motion-17">

  <div class="l1-motion-17-box">
    <div class="l1-motion-17-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-17-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library18
标题文字动画
Title Motion Lib
ASSEMBLE 爆裂拼合

爆裂拼合采用字符拆分 + 随机偏移 + assemble（归位）。

18 · ASSEMBLE / 爆裂拼合 点击展开代码 展开
字符拆分 + 随机偏移 + assemble（归位） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ASSEMBLE / 爆裂拼合</title>
  <style>
  .l1-motion-18{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-18-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-18-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-18-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-18-split .l1-motion-18-title span,
  .l1-motion-18-split .l1-motion-18-subtitle span{display:inline-block;}

   .l1-motion-18-title span,
   .l1-motion-18-subtitle span{animation:l1-motion-18-assembleLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*36ms);}

  @keyframes l1-motion-18-assembleLoop{0%{opacity:0;transform:translate(calc((var(--i) - 8)*9px),calc((8 - var(--i))*7px)) rotate(14deg) scale(.7)}36%,72%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc((var(--i) - 8)*-8px),calc((8 - var(--i))*-6px)) rotate(-10deg) scale(.7)}}
  </style>
</head>
<body>
  <div class="l1-motion-18">

  <div class="l1-motion-18-box l1-motion-18-split">
    <div class="l1-motion-18-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-18-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library19
标题文字动画
Title Motion Lib
ECHO 回声拖影

回声拖影采用text-shadow（文字阴影）+ opacity（影子衰减）。

19 · ECHO / 回声拖影 点击展开代码 展开
text-shadow（文字阴影）+ opacity（影子衰减） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ECHO / 回声拖影</title>
  <style>
  .l1-motion-19{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-19-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-19-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-19-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-19-split .l1-motion-19-title span,
  .l1-motion-19-split .l1-motion-19-subtitle span{display:inline-block;}

   .l1-motion-19-title,
   .l1-motion-19-subtitle{animation:l1-motion-19-echoLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-19-echoLoop{0%{opacity:0;transform:translateX(-14px);text-shadow:none}34%,72%{opacity:1;transform:translateX(0);text-shadow:8px 0 rgba(52,56,61,.16),16px 0 rgba(52,56,61,.08)}100%{opacity:0;transform:translateX(14px);text-shadow:-8px 0 rgba(52,56,61,.16),-16px 0 rgba(52,56,61,.08)}}
  </style>
</head>
<body>
  <div class="l1-motion-19">

  <div class="l1-motion-19-box">
    <div class="l1-motion-19-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-19-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library20
标题文字动画
Title Motion Lib
PRISM 棱镜分色

棱镜分色采用多层 text-shadow（文字阴影）+ color split（分色）。

20 · PRISM / 棱镜分色 点击展开代码 展开
多层 text-shadow（文字阴影）+ color split（分色） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PRISM / 棱镜分色</title>
  <style>
  .l1-motion-20{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-20-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-20-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-20-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-20-split .l1-motion-20-title span,
  .l1-motion-20-split .l1-motion-20-subtitle span{display:inline-block;}

   .l1-motion-20-title,
   .l1-motion-20-subtitle{animation:l1-motion-20-prismLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-20-prismLoop{0%{opacity:0;filter:blur(2px);text-shadow:none}34%,72%{opacity:1;filter:blur(0);text-shadow:-3px 0 rgba(120,140,170,.25),3px 0 rgba(180,120,150,.2),0 3px rgba(120,170,145,.18)}100%{opacity:0;filter:blur(2px);text-shadow:none}}
  </style>
</head>
<body>
  <div class="l1-motion-20">

  <div class="l1-motion-20-box">
    <div class="l1-motion-20-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-20-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library21
标题文字动画
Title Motion Lib
WEIGHT 字重渐强

字重渐强采用font-weight（字重）+ scale（压实）。

21 · WEIGHT / 字重渐强 点击展开代码 展开
font-weight（字重）+ scale（压实） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WEIGHT / 字重渐强</title>
  <style>
  .l1-motion-21{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-21-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-21-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-21-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-21-split .l1-motion-21-title span,
  .l1-motion-21-split .l1-motion-21-subtitle span{display:inline-block;}

   .l1-motion-21-title,
   .l1-motion-21-subtitle{animation:l1-motion-21-weightLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-21-weightLoop{0%{font-weight:300;opacity:.2;transform:scale(.96)}36%,72%{font-weight:900;opacity:1;transform:scale(1)}100%{font-weight:300;opacity:.2;transform:scale(.96)}}
  </style>
</head>
<body>
  <div class="l1-motion-21">

  <div class="l1-motion-21-box">
    <div class="l1-motion-21-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-21-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library22
标题文字动画
Title Motion Lib
LEAN 倾斜归正

倾斜归正采用skewX（水平倾斜）+ rotate（微旋转）。

22 · LEAN / 倾斜归正 点击展开代码 展开
skewX（水平倾斜）+ rotate（微旋转） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LEAN / 倾斜归正</title>
  <style>
  .l1-motion-22{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-22-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-22-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-22-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-22-split .l1-motion-22-title span,
  .l1-motion-22-split .l1-motion-22-subtitle span{display:inline-block;}

   .l1-motion-22-title,
   .l1-motion-22-subtitle{animation:l1-motion-22-leanLoop 2900ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-22-leanLoop{0%{opacity:0;transform:skewX(-22deg) translateX(-18px)}36%,72%{opacity:1;transform:skewX(0) translateX(0)}100%{opacity:0;transform:skewX(18deg) translateX(18px)}}
  </style>
</head>
<body>
  <div class="l1-motion-22">

  <div class="l1-motion-22-box">
    <div class="l1-motion-22-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-22-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library23
标题文字动画
Title Motion Lib
CASE 大小写切换

大小写切换采用text-transform（大小写）+ stagger（错峰）。

23 · CASE / 大小写切换 点击展开代码 展开
text-transform（大小写）+ stagger（错峰） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CASE / 大小写切换</title>
  <style>
  .l1-motion-23{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-23-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-23-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-23-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-23-split .l1-motion-23-title span,
  .l1-motion-23-split .l1-motion-23-subtitle span{display:inline-block;}

   .l1-motion-23-title span,
   .l1-motion-23-subtitle span{animation:l1-motion-23-caseLoop 3000ms ease-in-out infinite;animation-delay:calc(var(--i)*42ms);}

  @keyframes l1-motion-23-caseLoop{0%{opacity:.25;transform:translateY(12px) scale(.72)}36%,72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:.25;transform:translateY(-12px) scale(.72)}}
  </style>
</head>
<body>
  <div class="l1-motion-23">

  <div class="l1-motion-23-box l1-motion-23-split">
    <div class="l1-motion-23-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-23-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library24
标题文字动画
Title Motion Lib
CLOSER 字距收拢

字距收拢采用letter-spacing（字距）+ opacity（显现）。

24 · CLOSER / 字距收拢 点击展开代码 展开
letter-spacing（字距）+ opacity（显现） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CLOSER / 字距收拢</title>
  <style>
  .l1-motion-24{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-24-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-24-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-24-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-24-split .l1-motion-24-title span,
  .l1-motion-24-split .l1-motion-24-subtitle span{display:inline-block;}

   .l1-motion-24-title,
   .l1-motion-24-subtitle{animation:l1-motion-24-closerLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-24-closerLoop{0%{letter-spacing:.38em;opacity:.1;transform:translateX(.18em)}36%,72%{letter-spacing:.04em;opacity:1;transform:translateX(0)}100%{letter-spacing:.38em;opacity:.1;transform:translateX(.18em)}}
  </style>
</head>
<body>
  <div class="l1-motion-24">

  <div class="l1-motion-24-box">
    <div class="l1-motion-24-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-24-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library25
标题文字动画
Title Motion Lib
VOWELS 元音上浮

元音上浮采用字符选择 + translateY（上浮）。

25 · VOWELS / 元音上浮 点击展开代码 展开
字符选择 + translateY（上浮） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>VOWELS / 元音上浮</title>
  <style>
  .l1-motion-25{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-25-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-25-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-25-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-25-split .l1-motion-25-title span,
  .l1-motion-25-split .l1-motion-25-subtitle span{display:inline-block;}

   .l1-motion-25-title span,
   .l1-motion-25-subtitle span{animation:l1-motion-25-vowelBase 3000ms ease-in-out infinite;animation-delay:calc(var(--i)*25ms);}

   .l1-motion-25-subtitle span:nth-child(2),
   .l1-motion-25-subtitle span:nth-child(5),
   .l1-motion-25-subtitle span:nth-child(7),
   .l1-motion-25-title span:nth-child(2),
   .l1-motion-25-title span:nth-child(5){animation-name:l1-motion-25-vowelRise;}

  @keyframes l1-motion-25-vowelRise{0%{opacity:.15;transform:translateY(24px)}36%,72%{opacity:1;transform:translateY(-10px)}100%{opacity:.15;transform:translateY(24px)}}

  @keyframes l1-motion-25-vowelBase{0%{opacity:.3}36%,72%{opacity:1}100%{opacity:.3}}
  </style>
</head>
<body>
  <div class="l1-motion-25">

  <div class="l1-motion-25-box l1-motion-25-split">
    <div class="l1-motion-25-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-25-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library26
标题文字动画
Title Motion Lib
SHIVER 轻微颤动

轻微颤动采用translate（抖动）+ steps（跳帧节奏）。

26 · SHIVER / 轻微颤动 点击展开代码 展开
translate（抖动）+ steps（跳帧节奏） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SHIVER / 轻微颤动</title>
  <style>
  .l1-motion-26{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-26-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-26-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-26-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-26-split .l1-motion-26-title span,
  .l1-motion-26-split .l1-motion-26-subtitle span{display:inline-block;}

   .l1-motion-26-title,
   .l1-motion-26-subtitle{animation:l1-motion-26-shiverLoop 2400ms steps(2,end) infinite;}

  @keyframes l1-motion-26-shiverLoop{0%{opacity:.2;transform:translate(0,14px)}22%{opacity:1;transform:translate(0,0)}26%{transform:translate(-2px,1px)}30%{transform:translate(2px,-1px)}34%{transform:translate(-1px,1px)}45%,72%{transform:translate(0,0);opacity:1}100%{opacity:.2;transform:translate(0,-12px)}}
  </style>
</head>
<body>
  <div class="l1-motion-26">

  <div class="l1-motion-26-box">
    <div class="l1-motion-26-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-26-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library27
标题文字动画
Title Motion Lib
DOTS 标点节奏

标点节奏采用伪元素 content（内容）+ steps（步进）。

27 · DOTS / 标点节奏 点击展开代码 展开
伪元素 content（内容）+ steps（步进） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DOTS / 标点节奏</title>
  <style>
  .l1-motion-27{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-27-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-27-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-27-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-27-split .l1-motion-27-title span,
  .l1-motion-27-split .l1-motion-27-subtitle span{display:inline-block;}

   .l1-motion-27-subtitle::after{content:"";animation:l1-motion-27-dotsLoop 2100ms steps(4,end) infinite;}

  @keyframes l1-motion-27-dotsLoop{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
  </style>
</head>
<body>
  <div class="l1-motion-27">

  <div class="l1-motion-27-box">
    <div class="l1-motion-27-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-27-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library28
标题文字动画
Title Motion Lib
ACCENT 重音焦点

重音焦点采用accent mark（重音标记）+ drop（下落）。

28 · ACCENT / 重音焦点 点击展开代码 展开
accent mark（重音标记）+ drop（下落） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ACCENT / 重音焦点</title>
  <style>
  .l1-motion-28{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-28-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-28-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-28-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-28-split .l1-motion-28-title span,
  .l1-motion-28-split .l1-motion-28-subtitle span{display:inline-block;}

   .l1-motion-28-box::before{content:"´";position:absolute;left:50%;top:-34px;transform:translateX(-50%);font-size:32px;font-weight:900;animation:l1-motion-28-accentDrop 3000ms cubic-bezier(.2,.8,.2,1) infinite;}

   .l1-motion-28-title,
   .l1-motion-28-subtitle{animation:l1-motion-28-accentWord 3000ms ease-in-out infinite;}

  @keyframes l1-motion-28-accentDrop{0%{opacity:0;transform:translate(-50%,-28px)}32%,72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-28px)}}

  @keyframes l1-motion-28-accentWord{0%{opacity:.2}36%,72%{opacity:1}100%{opacity:.2}}
  </style>
</head>
<body>
  <div class="l1-motion-28">

  <div class="l1-motion-28-box">
    <div class="l1-motion-28-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-28-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library29
标题文字动画
Title Motion Lib
ERASE 擦除返回

擦除返回采用linear-gradient mask（渐变遮罩）+ background-position。

29 · ERASE / 擦除返回 点击展开代码 展开
linear-gradient mask（渐变遮罩）+ background-position 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ERASE / 擦除返回</title>
  <style>
  .l1-motion-29{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-29-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-29-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-29-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-29-split .l1-motion-29-title span,
  .l1-motion-29-split .l1-motion-29-subtitle span{display:inline-block;}

   .l1-motion-29-title,
   .l1-motion-29-subtitle{mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-size:240% 100%;animation:l1-motion-29-eraseLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-29-eraseLoop{0%{opacity:.2;mask-position:100% 0}36%,72%{opacity:1;mask-position:0 0}100%{opacity:.2;mask-position:-100% 0}}
  </style>
</head>
<body>
  <div class="l1-motion-29">

  <div class="l1-motion-29-box">
    <div class="l1-motion-29-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-29-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library30
标题文字动画
Title Motion Lib
SETTLE 稳定落点

稳定落点采用translateY（下落）+ overshoot（回弹）。

30 · SETTLE / 稳定落点 点击展开代码 展开
translateY（下落）+ overshoot（回弹） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SETTLE / 稳定落点</title>
  <style>
  .l1-motion-30{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-30-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-30-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-30-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-30-split .l1-motion-30-title span,
  .l1-motion-30-split .l1-motion-30-subtitle span{display:inline-block;}

   .l1-motion-30-title,
   .l1-motion-30-subtitle{animation:l1-motion-30-settleLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-30-settleLoop{0%{opacity:0;transform:translateY(-34px) scale(.96)}28%{opacity:1;transform:translateY(7px) scale(1.02)}42%,72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(18px) scale(.98)}}
  </style>
</head>
<body>
  <div class="l1-motion-30">

  <div class="l1-motion-30-box">
    <div class="l1-motion-30-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-30-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library31
标题文字动画
Title Motion Lib
HAZE 热雾浮字

热雾浮字采用blur（模糊）+ opacity（透明度）+ translateY。

31 · HAZE / 热雾浮字 点击展开代码 展开
blur（模糊）+ opacity（透明度）+ translateY 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HAZE / 热雾浮字</title>
  <style>
  .l1-motion-31{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-31-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-31-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-31-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-31-split .l1-motion-31-title span,
  .l1-motion-31-split .l1-motion-31-subtitle span{display:inline-block;}

   .l1-motion-31-title,
   .l1-motion-31-subtitle{animation:l1-motion-31-hazeLoop 3200ms ease-in-out infinite;}

  @keyframes l1-motion-31-hazeLoop{0%{opacity:0;filter:blur(12px);transform:translateY(18px)}36%,72%{opacity:1;filter:blur(0);transform:translateY(0)}100%{opacity:0;filter:blur(12px);transform:translateY(-18px)}}
  </style>
</head>
<body>
  <div class="l1-motion-31">

  <div class="l1-motion-31-box">
    <div class="l1-motion-31-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-31-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library32
标题文字动画
Title Motion Lib
MOLD 陶模成形

陶模成形采用scaleY（压扁）+ letter-spacing（收紧）。

32 · MOLD / 陶模成形 点击展开代码 展开
scaleY（压扁）+ letter-spacing（收紧） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MOLD / 陶模成形</title>
  <style>
  .l1-motion-32{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-32-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-32-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-32-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-32-split .l1-motion-32-title span,
  .l1-motion-32-split .l1-motion-32-subtitle span{display:inline-block;}

   .l1-motion-32-title,
   .l1-motion-32-subtitle{animation:l1-motion-32-moldLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-32-moldLoop{0%{opacity:.1;filter:blur(5px);transform:scaleY(.5);letter-spacing:.18em}36%,72%{opacity:1;filter:blur(0);transform:scaleY(1);letter-spacing:.04em}100%{opacity:.1;filter:blur(5px);transform:scaleY(.5);letter-spacing:.18em}}
  </style>
</head>
<body>
  <div class="l1-motion-32">

  <div class="l1-motion-32-box">
    <div class="l1-motion-32-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-32-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library33
标题文字动画
Title Motion Lib
SAND 沙粒沉积

沙粒沉积采用字符下落 + opacity（颗粒显现）。

33 · SAND / 沙粒沉积 点击展开代码 展开
字符下落 + opacity（颗粒显现） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SAND / 沙粒沉积</title>
  <style>
  .l1-motion-33{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-33-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-33-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-33-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-33-split .l1-motion-33-title span,
  .l1-motion-33-split .l1-motion-33-subtitle span{display:inline-block;}

   .l1-motion-33-title span,
   .l1-motion-33-subtitle span{animation:l1-motion-33-sandLoop 3000ms ease-in-out infinite;animation-delay:calc(var(--i)*45ms);}

  @keyframes l1-motion-33-sandLoop{0%{opacity:0;transform:translateY(-38px) rotate(7deg)}36%,72%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(24px) rotate(-5deg)}}
  </style>
</head>
<body>
  <div class="l1-motion-33">

  <div class="l1-motion-33-box l1-motion-33-split">
    <div class="l1-motion-33-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-33-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library34
标题文字动画
Title Motion Lib
SUN 日光呼吸

日光呼吸采用text-shadow（光晕）+ scale（呼吸）。

34 · SUN / 日光呼吸 点击展开代码 展开
text-shadow（光晕）+ scale（呼吸） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SUN / 日光呼吸</title>
  <style>
  .l1-motion-34{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-34-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-34-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-34-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-34-split .l1-motion-34-title span,
  .l1-motion-34-split .l1-motion-34-subtitle span{display:inline-block;}

   .l1-motion-34-title,
   .l1-motion-34-subtitle{animation:l1-motion-34-sunLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-34-sunLoop{0%{opacity:.2;transform:scale(.92);text-shadow:0 0 0 transparent}36%,72%{opacity:1;transform:scale(1);text-shadow:0 0 22px rgba(52,56,61,.18)}100%{opacity:.2;transform:scale(.92);text-shadow:0 0 0 transparent}}
  </style>
</head>
<body>
  <div class="l1-motion-34">

  <div class="l1-motion-34-box">
    <div class="l1-motion-34-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-34-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library35
标题文字动画
Title Motion Lib
SCORE 记分板翻转

记分板翻转采用rotateX（翻片）+ perspective（透视）。

35 · SCORE / 记分板翻转 点击展开代码 展开
rotateX（翻片）+ perspective（透视） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SCORE / 记分板翻转</title>
  <style>
  .l1-motion-35{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-35-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-35-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-35-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-35-split .l1-motion-35-title span,
  .l1-motion-35-split .l1-motion-35-subtitle span{display:inline-block;}

   .l1-motion-35-title,
   .l1-motion-35-subtitle{display:block;transform-origin:left center;animation:l1-motion-35-pageLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-35-subtitle{animation-delay:90ms;}

  @keyframes l1-motion-35-pageLoop{0%{opacity:.05;transform:perspective(620px) rotateY(-88deg);filter:blur(2px)}36%{opacity:1;transform:perspective(620px) rotateY(6deg);filter:blur(0)}50%,72%{opacity:1;transform:perspective(620px) rotateY(0)}100%{opacity:.05;transform:perspective(620px) rotateY(82deg);filter:blur(2px)}}
  </style>
</head>
<body>
  <div class="l1-motion-35">

  <div class="l1-motion-35-box">
    <div class="l1-motion-35-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-35-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library36
标题文字动画
Title Motion Lib
CROWD 人浪推字

人浪推字采用多重 text-shadow + letter-spacing 收紧。

36 · CROWD / 人浪推字 点击展开代码 展开
多重 text-shadow + letter-spacing 收紧 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CROWD / 人浪推字</title>
  <style>
  .l1-motion-36{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-36-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-36-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-36-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-36-split .l1-motion-36-title span,
  .l1-motion-36-split .l1-motion-36-subtitle span{display:inline-block;}

   .l1-motion-36-title,
   .l1-motion-36-subtitle{animation:l1-motion-36-crowdLoop 3100ms ease-in-out infinite;}

  @keyframes l1-motion-36-crowdLoop{0%{opacity:.15;letter-spacing:.28em;text-shadow:-14px 0 rgba(52,56,61,.14),14px 0 rgba(52,56,61,.14)}36%,72%{opacity:1;letter-spacing:.04em;text-shadow:-4px 0 rgba(52,56,61,.08),4px 0 rgba(52,56,61,.08)}100%{opacity:.15;letter-spacing:.28em;text-shadow:-14px 0 rgba(52,56,61,.14),14px 0 rgba(52,56,61,.14)}}
  </style>
</head>
<body>
  <div class="l1-motion-36">

  <div class="l1-motion-36-box">
    <div class="l1-motion-36-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-36-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library37
标题文字动画
Title Motion Lib
WHISTLE 哨声切入

哨声切入采用skew（斜切）+ slash line（斜线）。

37 · WHISTLE / 哨声切入 点击展开代码 展开
skew（斜切）+ slash line（斜线） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WHISTLE / 哨声切入</title>
  <style>
  .l1-motion-37{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-37-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-37-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-37-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-37-split .l1-motion-37-title span,
  .l1-motion-37-split .l1-motion-37-subtitle span{display:inline-block;}

   .l1-motion-37-title,
   .l1-motion-37-subtitle{position:relative;animation:l1-motion-37-whistleLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-37-box::after{content:"";position:absolute;left:-20%;top:50%;width:140%;height:2px;background:#34383d;transform:rotate(-12deg) scaleX(0);transform-origin:left;animation:l1-motion-37-slashLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-37-whistleLoop{0%{opacity:0;transform:skewX(-20deg) translateX(-26px)}32%,72%{opacity:1;transform:skewX(0) translateX(0)}100%{opacity:0;transform:skewX(20deg) translateX(26px)}}

  @keyframes l1-motion-37-slashLoop{0%{transform:rotate(-12deg) scaleX(0);opacity:0}24%,44%{transform:rotate(-12deg) scaleX(1);opacity:.5}72%,100%{opacity:0}}
  </style>
</head>
<body>
  <div class="l1-motion-37">

  <div class="l1-motion-37-box">
    <div class="l1-motion-37-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-37-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library38
标题文字动画
Title Motion Lib
TURF 草地滚入

草地滚入采用rotate（滚动）+ translateY（弹起）。

38 · TURF / 草地滚入 点击展开代码 展开
rotate（滚动）+ translateY（弹起） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TURF / 草地滚入</title>
  <style>
  .l1-motion-38{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-38-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-38-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-38-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-38-split .l1-motion-38-title span,
  .l1-motion-38-split .l1-motion-38-subtitle span{display:inline-block;}

   .l1-motion-38-title,
   .l1-motion-38-subtitle{display:block;animation:l1-motion-38-turfLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-38-turfLoop{0%{opacity:0;transform:translateY(42px) rotate(-10deg)}36%{opacity:1;transform:translateY(-6px) rotate(2deg)}50%,72%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(32px) rotate(10deg)}}
  </style>
</head>
<body>
  <div class="l1-motion-38">

  <div class="l1-motion-38-box">
    <div class="l1-motion-38-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-38-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library39
标题文字动画
Title Motion Lib
BANNER 旗帜舒展

旗帜舒展采用背景条 scaleX + title lift。

39 · BANNER / 旗帜舒展 点击展开代码 展开
背景条 scaleX + title lift 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BANNER / 旗帜舒展</title>
  <style>
  .l1-motion-39{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-39-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-39-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-39-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-39-split .l1-motion-39-title span,
  .l1-motion-39-split .l1-motion-39-subtitle span{display:inline-block;}

   .l1-motion-39-box{padding:8px 18px;}

   .l1-motion-39-box::before{content:"";position:absolute;inset:14px 0;background:rgba(52,56,61,.06);transform-origin:left;z-index:-1;animation:l1-motion-39-bannerStrip 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-39-title,
   .l1-motion-39-subtitle{animation:l1-motion-39-bannerText 3000ms ease-in-out infinite;}

  @keyframes l1-motion-39-bannerStrip{0%{transform:scaleX(0);opacity:0}34%,72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0;transform-origin:right}}

  @keyframes l1-motion-39-bannerText{0%{opacity:0;transform:translateY(12px)}36%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
  </style>
</head>
<body>
  <div class="l1-motion-39">

  <div class="l1-motion-39-box">
    <div class="l1-motion-39-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-39-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library40
标题文字动画
Title Motion Lib
NET 球网捕字

球网捕字采用grid overlay（网格层）+ scale（弹性）。

40 · NET / 球网捕字 点击展开代码 展开
grid overlay（网格层）+ scale（弹性） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NET / 球网捕字</title>
  <style>
  .l1-motion-40{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-40-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-40-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-40-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-40-split .l1-motion-40-title span,
  .l1-motion-40-split .l1-motion-40-subtitle span{display:inline-block;}

   .l1-motion-40,
  .l1-motion-40-motion-stage{background-image:linear-gradient(rgba(52,56,61,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(52,56,61,.035) 1px,transparent 1px);background-size:24px 24px;}

   .l1-motion-40-title span,
   .l1-motion-40-subtitle span{animation:l1-motion-40-gridLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*35ms);}

  @keyframes l1-motion-40-gridLoop{0%{opacity:0;transform:translate(calc((var(--i) - 8)*5px),calc((8 - var(--i))*4px)) rotate(8deg)}36%,72%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc((8 - var(--i))*4px),calc((var(--i) - 8)*3px)) rotate(-6deg)}}
  </style>
</head>
<body>
  <div class="l1-motion-40">

  <div class="l1-motion-40-box l1-motion-40-split">
    <div class="l1-motion-40-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-40-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library41
标题文字动画
Title Motion Lib
BURN 焦点升温

焦点升温采用text-shadow（发光）+ blur（热浪）。

41 · BURN / 焦点升温 点击展开代码 展开
text-shadow（发光）+ blur（热浪） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BURN / 焦点升温</title>
  <style>
  .l1-motion-41{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-41-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-41-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-41-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-41-split .l1-motion-41-title span,
  .l1-motion-41-split .l1-motion-41-subtitle span{display:inline-block;}

   .l1-motion-41-title,
   .l1-motion-41-subtitle{animation:l1-motion-41-burnLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-41-burnLoop{0%{opacity:.1;filter:blur(4px);text-shadow:0 0 0 transparent}36%,72%{opacity:1;filter:blur(0);text-shadow:0 0 18px rgba(52,56,61,.2)}100%{opacity:.1;filter:blur(4px);text-shadow:0 0 0 transparent}}
  </style>
</head>
<body>
  <div class="l1-motion-41">

  <div class="l1-motion-41-box">
    <div class="l1-motion-41-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-41-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library42
标题文字动画
Title Motion Lib
TROPHY 奖杯升格

奖杯升格采用shine sweep（高光扫过）+ lift（上浮）。

42 · TROPHY / 奖杯升格 点击展开代码 展开
shine sweep（高光扫过）+ lift（上浮） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TROPHY / 奖杯升格</title>
  <style>
  .l1-motion-42{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-42-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-42-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-42-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-42-split .l1-motion-42-title span,
  .l1-motion-42-split .l1-motion-42-subtitle span{display:inline-block;}

   .l1-motion-42-title,
   .l1-motion-42-subtitle{position:relative;overflow:hidden;animation:l1-motion-42-shineText 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-42-box::after{content:"";position:absolute;top:0;bottom:0;width:34px;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);animation:l1-motion-42-shineLoop 3000ms ease-in-out infinite;}

  @keyframes l1-motion-42-shineText{0%{opacity:0;transform:translateY(20px)}34%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-16px)}}

  @keyframes l1-motion-42-shineLoop{0%,22%{left:-40%;opacity:0}45%{left:120%;opacity:1}72%,100%{left:120%;opacity:0}}
  </style>
</head>
<body>
  <div class="l1-motion-42">

  <div class="l1-motion-42-box">
    <div class="l1-motion-42-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-42-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library43
标题文字动画
Title Motion Lib
STEMS 笔画上提

笔画上提采用vertical stems（竖线）+ scaleY。

43 · STEMS / 笔画上提 点击展开代码 展开
vertical stems（竖线）+ scaleY 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>STEMS / 笔画上提</title>
  <style>
  .l1-motion-43{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-43-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-43-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-43-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-43-split .l1-motion-43-title span,
  .l1-motion-43-split .l1-motion-43-subtitle span{display:inline-block;}

   .l1-motion-43-box::before{content:"";position:absolute;left:4px;right:4px;bottom:-18px;height:52px;background:repeating-linear-gradient(90deg,#34383d 0 2px,transparent 2px 34px);opacity:.12;transform-origin:bottom;z-index:-1;animation:l1-motion-43-stemGrow 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

   .l1-motion-43-title,
   .l1-motion-43-subtitle{animation:l1-motion-43-stemsText 3000ms ease-in-out infinite;}

  @keyframes l1-motion-43-stemGrow{0%{transform:scaleY(0)}36%,72%{transform:scaleY(1)}100%{transform:scaleY(0)}}

  @keyframes l1-motion-43-stemsText{0%{opacity:.18;transform:translateY(14px)}36%,72%{opacity:1;transform:translateY(0)}100%{opacity:.18;transform:translateY(-10px)}}
  </style>
</head>
<body>
  <div class="l1-motion-43">

  <div class="l1-motion-43-box">
    <div class="l1-motion-43-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-43-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library44
标题文字动画
Title Motion Lib
CAPS 顶线归齐

顶线归齐采用cap line（顶线）+ translateY。

44 · CAPS / 顶线归齐 点击展开代码 展开
cap line（顶线）+ translateY 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CAPS / 顶线归齐</title>
  <style>
  .l1-motion-44{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-44-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-44-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-44-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-44-split .l1-motion-44-title span,
  .l1-motion-44-split .l1-motion-44-subtitle span{display:inline-block;}

   .l1-motion-44-box::before{content:"";position:absolute;left:0;right:0;top:-10px;height:2px;background:#34383d;transform-origin:left;animation:l1-motion-44-capLine 3000ms ease-in-out infinite;}

   .l1-motion-44-title,
   .l1-motion-44-subtitle{animation:l1-motion-44-capsLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-44-capsLoop{0%{opacity:.15;transform:translateY(24px)}36%,72%{opacity:1;transform:translateY(0)}100%{opacity:.15;transform:translateY(-18px)}}

  @keyframes l1-motion-44-capLine{0%{transform:scaleX(0);opacity:0}34%,72%{transform:scaleX(1);opacity:.45}100%{transform:scaleX(0);opacity:0}}
  </style>
</head>
<body>
  <div class="l1-motion-44">

  <div class="l1-motion-44-box">
    <div class="l1-motion-44-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-44-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library45
标题文字动画
Title Motion Lib
TREMOLO 细频轻摇

细频轻摇采用微位移 + blur 抖动。

45 · TREMOLO / 细频轻摇 点击展开代码 展开
微位移 + blur 抖动 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TREMOLO / 细频轻摇</title>
  <style>
  .l1-motion-45{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-45-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-45-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-45-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-45-split .l1-motion-45-title span,
  .l1-motion-45-split .l1-motion-45-subtitle span{display:inline-block;}

   .l1-motion-45-title,
   .l1-motion-45-subtitle{animation:l1-motion-45-shiverLoop 2400ms steps(2,end) infinite;}

  @keyframes l1-motion-45-shiverLoop{0%{opacity:.2;transform:translate(0,14px)}22%{opacity:1;transform:translate(0,0)}26%{transform:translate(-2px,1px)}30%{transform:translate(2px,-1px)}34%{transform:translate(-1px,1px)}45%,72%{transform:translate(0,0);opacity:1}100%{opacity:.2;transform:translate(0,-12px)}}
  </style>
</head>
<body>
  <div class="l1-motion-45">

  <div class="l1-motion-45-box">
    <div class="l1-motion-45-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-45-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library46
标题文字动画
Title Motion Lib
PRESS 字形按压

字形按压采用scaleY（压扁）+ translateY（下压）。

46 · PRESS / 字形按压 点击展开代码 展开
scaleY（压扁）+ translateY（下压） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PRESS / 字形按压</title>
  <style>
  .l1-motion-46{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-46-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-46-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-46-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-46-split .l1-motion-46-title span,
  .l1-motion-46-split .l1-motion-46-subtitle span{display:inline-block;}

   .l1-motion-46-title,
   .l1-motion-46-subtitle{transform-origin:center bottom;animation:l1-motion-46-pressLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-46-pressLoop{0%{opacity:0;transform:translateY(-22px) scaleY(1.2)}28%{opacity:1;transform:translateY(8px) scaleY(.72)}42%,72%{opacity:1;transform:translateY(0) scaleY(1)}100%{opacity:0;transform:translateY(18px) scaleY(.9)}}
  </style>
</head>
<body>
  <div class="l1-motion-46">

  <div class="l1-motion-46-box">
    <div class="l1-motion-46-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-46-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library47
标题文字动画
Title Motion Lib
OPEN 字距打开

字距打开采用letter-spacing（字距扩张）。

47 · OPEN / 字距打开 点击展开代码 展开
letter-spacing（字距扩张） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>OPEN / 字距打开</title>
  <style>
  .l1-motion-47{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-47-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-47-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-47-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-47-split .l1-motion-47-title span,
  .l1-motion-47-split .l1-motion-47-subtitle span{display:inline-block;}

   .l1-motion-47-title,
   .l1-motion-47-subtitle{animation:l1-motion-47-openLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-47-openLoop{0%{opacity:.15;letter-spacing:-.12em;transform:scaleX(.75)}36%,72%{opacity:1;letter-spacing:.14em;transform:scaleX(1)}100%{opacity:.15;letter-spacing:-.12em;transform:scaleX(.75)}}
  </style>
</head>
<body>
  <div class="l1-motion-47">

  <div class="l1-motion-47-box">
    <div class="l1-motion-47-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-47-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library48
标题文字动画
Title Motion Lib
FOLDIN 字内折入

字内折入采用rotateY（内折）+ split letters（拆字）。

48 · FOLDIN / 字内折入 点击展开代码 展开
rotateY（内折）+ split letters（拆字） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FOLDIN / 字内折入</title>
  <style>
  .l1-motion-48{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-48-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-48-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-48-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-48-split .l1-motion-48-title span,
  .l1-motion-48-split .l1-motion-48-subtitle span{display:inline-block;}

   .l1-motion-48-title span,
   .l1-motion-48-subtitle span{display:inline-block;transform-origin:center;animation:l1-motion-48-foldInLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*36ms);}

  @keyframes l1-motion-48-foldInLoop{0%{opacity:0;transform:perspective(400px) rotateY(85deg)}36%,72%{opacity:1;transform:perspective(400px) rotateY(0)}100%{opacity:0;transform:perspective(400px) rotateY(-85deg)}}
  </style>
</head>
<body>
  <div class="l1-motion-48">

  <div class="l1-motion-48-box l1-motion-48-split">
    <div class="l1-motion-48-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-48-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library49
标题文字动画
Title Motion Lib
SERIF 衬线闪现

衬线闪现采用上下横线伪元素 + title reveal。

49 · SERIF / 衬线闪现 点击展开代码 展开
上下横线伪元素 + title reveal 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SERIF / 衬线闪现</title>
  <style>
  .l1-motion-49{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-49-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-49-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-49-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-49-split .l1-motion-49-title span,
  .l1-motion-49-split .l1-motion-49-subtitle span{display:inline-block;}

   .l1-motion-49-box::before,
   .l1-motion-49-box::after{content:"";position:absolute;left:0;right:0;height:2px;background:#34383d;opacity:.45;transform:scaleX(0);animation:l1-motion-49-serifLine 3000ms ease-in-out infinite;}

   .l1-motion-49-box::before{top:-8px}

   .l1-motion-49-box::after{bottom:-8px}

   .l1-motion-49-title,
   .l1-motion-49-subtitle{animation:l1-motion-49-serifText 3000ms ease-in-out infinite;}

  @keyframes l1-motion-49-serifLine{0%{transform:scaleX(0)}36%,72%{transform:scaleX(1)}100%{transform:scaleX(0)}}

  @keyframes l1-motion-49-serifText{0%{opacity:.18;filter:blur(2px)}36%,72%{opacity:1;filter:blur(0)}100%{opacity:.18;filter:blur(2px)}}
  </style>
</head>
<body>
  <div class="l1-motion-49">

  <div class="l1-motion-49-box">
    <div class="l1-motion-49-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-49-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library50
标题文字动画
Title Motion Lib
GLYPH 字形替换

字形替换采用字符拆分 + rotate/blur + lock。

50 · GLYPH / 字形替换 点击展开代码 展开
字符拆分 + rotate/blur + lock 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GLYPH / 字形替换</title>
  <style>
  .l1-motion-50{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-50-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-50-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-50-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-50-split .l1-motion-50-title span,
  .l1-motion-50-split .l1-motion-50-subtitle span{display:inline-block;}

   .l1-motion-50-title span,
   .l1-motion-50-subtitle span{animation:l1-motion-50-glyphLoop 3000ms steps(2,end) infinite;animation-delay:calc(var(--i)*38ms);}

  @keyframes l1-motion-50-glyphLoop{0%{opacity:.15;filter:blur(3px);transform:rotate(8deg) scale(.88)}30%,72%{opacity:1;filter:blur(0);transform:rotate(0) scale(1)}100%{opacity:.15;filter:blur(3px);transform:rotate(-8deg) scale(.88)}}
  </style>
</head>
<body>
  <div class="l1-motion-50">

  <div class="l1-motion-50-box l1-motion-50-split">
    <div class="l1-motion-50-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-50-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library51
标题文字动画
Title Motion Lib
MONO 等宽锁定

等宽锁定采用monospace（等宽字体）+ grid boxes（字符格）。

51 · MONO / 等宽锁定 点击展开代码 展开
monospace（等宽字体）+ grid boxes（字符格） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MONO / 等宽锁定</title>
  <style>
  .l1-motion-51{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-51-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-51-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-51-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-51-split .l1-motion-51-title span,
  .l1-motion-51-split .l1-motion-51-subtitle span{display:inline-block;}

   .l1-motion-51-title,
   .l1-motion-51-subtitle{font-family:Consolas,Menlo,"Microsoft YaHei",monospace;}

   .l1-motion-51-title span,
   .l1-motion-51-subtitle span{display:inline-grid;place-items:center;width:.72em;border-bottom:2px solid #34383d;animation:l1-motion-51-monoLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*38ms);}

  @keyframes l1-motion-51-monoLoop{0%{opacity:0;transform:translateY(24px)}32%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
  </style>
</head>
<body>
  <div class="l1-motion-51">

  <div class="l1-motion-51-box l1-motion-51-split">
    <div class="l1-motion-51-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-51-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library52
标题文字动画
Title Motion Lib
PINCH 中心挤压

中心挤压采用scaleX（挤压）+ letter-spacing。

52 · PINCH / 中心挤压 点击展开代码 展开
scaleX（挤压）+ letter-spacing 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PINCH / 中心挤压</title>
  <style>
  .l1-motion-52{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-52-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-52-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-52-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-52-split .l1-motion-52-title span,
  .l1-motion-52-split .l1-motion-52-subtitle span{display:inline-block;}

   .l1-motion-52-title,
   .l1-motion-52-subtitle{display:block;animation:l1-motion-52-pinchLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-52-pinchLoop{0%{opacity:.15;transform:scaleX(1.6);letter-spacing:.18em}32%{opacity:1;transform:scaleX(.72);letter-spacing:-.03em}46%,72%{opacity:1;transform:scaleX(1);letter-spacing:.04em}100%{opacity:.15;transform:scaleX(1.6);letter-spacing:.18em}}
  </style>
</head>
<body>
  <div class="l1-motion-52">

  <div class="l1-motion-52-box">
    <div class="l1-motion-52-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-52-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library53
标题文字动画
Title Motion Lib
SINK 静默下沉

静默下沉采用translateY（下沉）+ opacity fade。

53 · SINK / 静默下沉 点击展开代码 展开
translateY（下沉）+ opacity fade 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SINK / 静默下沉</title>
  <style>
  .l1-motion-53{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-53-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-53-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-53-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-53-split .l1-motion-53-title span,
  .l1-motion-53-split .l1-motion-53-subtitle span{display:inline-block;}

   .l1-motion-53-box::before{content:"";position:absolute;left:50%;top:50%;width:245px;height:92px;border-radius:48% 55% 45% 58%;background:linear-gradient(135deg,rgba(52,56,61,.08),rgba(52,56,61,.025));transform:translate(-50%,-50%) scale(.08);z-index:-1;animation:l1-motion-53-inkLoop 3000ms cubic-bezier(.15,.72,.16,1) infinite;}

   .l1-motion-53-title,
   .l1-motion-53-subtitle{animation:l1-motion-53-inkText 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-53-inkLoop{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}34%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}

  @keyframes l1-motion-53-inkText{0%,18%{opacity:0;transform:translateY(10px)}42%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
  </style>
</head>
<body>
  <div class="l1-motion-53">

  <div class="l1-motion-53-box">
    <div class="l1-motion-53-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-53-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library54
标题文字动画
Title Motion Lib
ETCH 细刻定稿

细刻定稿采用stroke（描边）+ fill（填充）+ clip-path reveal。

54 · ETCH / 细刻定稿 点击展开代码 展开
stroke（描边）+ fill（填充）+ clip-path reveal 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ETCH / 细刻定稿</title>
  <style>
  .l1-motion-54{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-54-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-54-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-54-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-54-split .l1-motion-54-title span,
  .l1-motion-54-split .l1-motion-54-subtitle span{display:inline-block;}

   .l1-motion-54-title,
   .l1-motion-54-subtitle{position:relative;color:transparent;-webkit-text-stroke:1px #34383d;animation:l1-motion-54-etchStroke 3100ms ease-in-out infinite;}

   .l1-motion-54-title::before,
   .l1-motion-54-subtitle::before{content:attr(data-text);position:absolute;inset:0;color:#34383d;clip-path:inset(0 100% 0 0);animation:l1-motion-54-etchFill 3100ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-54-etchFill{0%{clip-path:inset(0 100% 0 0)}38%,72%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}

  @keyframes l1-motion-54-etchStroke{0%{opacity:.18}38%,72%{opacity:1}100%{opacity:.18}}
  </style>
</head>
<body>
  <div class="l1-motion-54">

  <div class="l1-motion-54-box">
    <div class="l1-motion-54-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-54-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library55
标题文字动画
Title Motion Lib
HERO 巨幕主标题

巨幕主标题采用scale（放大）+ opacity（透明度）+ settle（落定）。

55 · HERO / 巨幕主标题 点击展开代码 展开
scale（放大）+ opacity（透明度）+ settle（落定） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HERO / 巨幕主标题</title>
  <style>
  .l1-motion-55{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-55-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-55-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-55-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-55-split .l1-motion-55-title span,
  .l1-motion-55-split .l1-motion-55-subtitle span{display:inline-block;}

   .l1-motion-55-title,
   .l1-motion-55-subtitle{animation:l1-motion-55-heroLoop 3000ms cubic-bezier(.18,.9,.2,1) infinite;}

  @keyframes l1-motion-55-heroLoop{0%{opacity:0;transform:scale(.72);filter:blur(4px)}30%{opacity:1;transform:scale(1.05);filter:blur(0)}44%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9);filter:blur(2px)}}
  </style>
</head>
<body>
  <div class="l1-motion-55">

  <div class="l1-motion-55-box">
    <div class="l1-motion-55-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-55-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library56
标题文字动画
Title Motion Lib
CASCADE 瀑布级联

瀑布级联采用stagger delay（错峰延迟）+ translateY（垂直位移）。

56 · CASCADE / 瀑布级联 点击展开代码 展开
stagger delay（错峰延迟）+ translateY（垂直位移） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CASCADE / 瀑布级联</title>
  <style>
  .l1-motion-56{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-56-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-56-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-56-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-56-split .l1-motion-56-title span,
  .l1-motion-56-split .l1-motion-56-subtitle span{display:inline-block;}

   .l1-motion-56-title span,
   .l1-motion-56-subtitle span{display:inline-block;animation:l1-motion-56-cascadeLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*45ms);}

  @keyframes l1-motion-56-cascadeLoop{0%{opacity:0;transform:translateY(-30px)}36%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(30px)}}
  </style>
</head>
<body>
  <div class="l1-motion-56">

  <div class="l1-motion-56-box l1-motion-56-split">
    <div class="l1-motion-56-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-56-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library57
标题文字动画
Title Motion Lib
STAGGER 错峰重复

错峰重复采用多行复制 + delay（延迟）+ translateY。

57 · STAGGER / 错峰重复 点击展开代码 展开
多行复制 + delay（延迟）+ translateY 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>STAGGER / 错峰重复</title>
  <style>
  .l1-motion-57{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-57-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-57-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-57-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-57-split .l1-motion-57-title span,
  .l1-motion-57-split .l1-motion-57-subtitle span{display:inline-block;}

   .l1-motion-57-title,
   .l1-motion-57-subtitle{position:relative;}

   .l1-motion-57-title::before,
   .l1-motion-57-title::after,
   .l1-motion-57-subtitle::before,
   .l1-motion-57-subtitle::after{content:attr(data-text);position:absolute;left:0;right:0;opacity:.16;}

   .l1-motion-57-title::before,
   .l1-motion-57-subtitle::before{transform:translateY(-1.05em);}

   .l1-motion-57-title::after,
   .l1-motion-57-subtitle::after{transform:translateY(1.05em);}

   .l1-motion-57-title span,
   .l1-motion-57-subtitle span{display:inline-block;animation:l1-motion-57-staggerLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;animation-delay:calc(var(--i)*28ms);}

  @keyframes l1-motion-57-staggerLoop{0%{opacity:0;transform:translateY(28px)}34%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-28px)}}
  </style>
</head>
<body>
  <div class="l1-motion-57">

  <div class="l1-motion-57-box l1-motion-57-split">
    <div class="l1-motion-57-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-57-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library58
标题文字动画
Title Motion Lib
DIRECTIONAL 方向滑入

方向滑入采用translateX（横向位移）+ clip reveal（裁切显现）。

58 · DIRECTIONAL / 方向滑入 点击展开代码 展开
translateX（横向位移）+ clip reveal（裁切显现） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DIRECTIONAL / 方向滑入</title>
  <style>
  .l1-motion-58{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-58-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-58-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-58-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-58-split .l1-motion-58-title span,
  .l1-motion-58-split .l1-motion-58-subtitle span{display:inline-block;}

   .l1-motion-58-box{overflow:hidden;}

   .l1-motion-58-title,
   .l1-motion-58-subtitle{animation:l1-motion-58-directionLoop 3200ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-58-directionLoop{0%{opacity:0;transform:translateX(-80px);clip-path:inset(0 100% 0 0)}38%,72%{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}100%{opacity:0;transform:translateX(80px);clip-path:inset(0 0 0 100%)}}
  </style>
</head>
<body>
  <div class="l1-motion-58">

  <div class="l1-motion-58-box">
    <div class="l1-motion-58-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-58-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library59
标题文字动画
Title Motion Lib
SLOW REVEAL 慢速显现

慢速显现采用opacity（透明度）+ mask（遮罩）+ slow ease（慢缓动）。

59 · SLOW REVEAL / 慢速显现 点击展开代码 展开
opacity（透明度）+ mask（遮罩）+ slow ease（慢缓动） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SLOW REVEAL / 慢速显现</title>
  <style>
  .l1-motion-59{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-59-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-59-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-59-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-59-split .l1-motion-59-title span,
  .l1-motion-59-split .l1-motion-59-subtitle span{display:inline-block;}

   .l1-motion-59-title,
   .l1-motion-59-subtitle{animation:l1-motion-59-slowRevealLoop 4200ms ease-in-out infinite;mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-size:240% 100%;}

  @keyframes l1-motion-59-slowRevealLoop{0%{opacity:.05;filter:blur(4px);mask-position:100% 0}45%,78%{opacity:1;filter:blur(0);mask-position:0 0}100%{opacity:.05;filter:blur(4px);mask-position:-100% 0}}
  </style>
</head>
<body>
  <div class="l1-motion-59">

  <div class="l1-motion-59-box">
    <div class="l1-motion-59-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-59-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library60
标题文字动画
Title Motion Lib
PULSE 脉冲跳动

脉冲跳动采用scale（缩放）+ glow（微光）。

60 · PULSE / 脉冲跳动 点击展开代码 展开
scale（缩放）+ glow（微光） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PULSE / 脉冲跳动</title>
  <style>
  .l1-motion-60{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-60-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-60-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-60-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-60-split .l1-motion-60-title span,
  .l1-motion-60-split .l1-motion-60-subtitle span{display:inline-block;}

   .l1-motion-60-title,
   .l1-motion-60-subtitle{animation:l1-motion-60-pulseLoop 2600ms ease-in-out infinite;}

  @keyframes l1-motion-60-pulseLoop{0%{opacity:.25;transform:scale(.94);text-shadow:0 0 0 transparent}38%{opacity:1;transform:scale(1.05);text-shadow:0 0 18px rgba(52,56,61,.16)}54%,72%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.94)}}
  </style>
</head>
<body>
  <div class="l1-motion-60">

  <div class="l1-motion-60-box">
    <div class="l1-motion-60-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-60-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library61
标题文字动画
Title Motion Lib
WAVE 波浪错位

波浪错位采用字符拆分 + sine-like translateY（波浪位移）。

61 · WAVE / 波浪错位 点击展开代码 展开
字符拆分 + sine-like translateY（波浪位移） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WAVE / 波浪错位</title>
  <style>
  .l1-motion-61{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-61-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-61-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-61-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-61-split .l1-motion-61-title span,
  .l1-motion-61-split .l1-motion-61-subtitle span{display:inline-block;}

   .l1-motion-61-title span,
   .l1-motion-61-subtitle span{display:inline-block;animation:l1-motion-61-waveLoop 2600ms ease-in-out infinite;animation-delay:calc(var(--i)*55ms);}

  @keyframes l1-motion-61-waveLoop{0%,100%{opacity:.35;transform:translateY(10px)}32%,72%{opacity:1;transform:translateY(-8px)}52%{transform:translateY(0)}}
  </style>
</head>
<body>
  <div class="l1-motion-61">

  <div class="l1-motion-61-box l1-motion-61-split">
    <div class="l1-motion-61-title"><span style="--i:0">标</span><span style="--i:1">题</span><span style="--i:2">文</span><span style="--i:3">字</span><span style="--i:4">动</span><span style="--i:5">画</span></div>
    <div class="l1-motion-61-subtitle"><span style="--i:6">T</span><span style="--i:7">i</span><span style="--i:8">t</span><span style="--i:9">l</span><span style="--i:10">e</span><span style="--i:11">&nbsp;</span><span style="--i:12">M</span><span style="--i:13">o</span><span style="--i:14">t</span><span style="--i:15">i</span><span style="--i:16">o</span><span style="--i:17">n</span><span style="--i:18">&nbsp;</span><span style="--i:19">L</span><span style="--i:20">i</span><span style="--i:21">b</span></div>
  </div>
  </div>
</body>
</html>
Motion Library62
标题文字动画
Title Motion Lib
ZOOM 镜头推近

镜头推近采用scale（缩放）+ blur（模糊）。

62 · ZOOM / 镜头推近 点击展开代码 展开
scale（缩放）+ blur（模糊） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ZOOM / 镜头推近</title>
  <style>
  .l1-motion-62{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-62-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-62-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-62-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-62-split .l1-motion-62-title span,
  .l1-motion-62-split .l1-motion-62-subtitle span{display:inline-block;}

   .l1-motion-62-title,
   .l1-motion-62-subtitle{animation:l1-motion-62-zoomLoop 3000ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-62-zoomLoop{0%{opacity:0;transform:scale(.45);filter:blur(6px)}34%,72%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.28);filter:blur(5px)}}
  </style>
</head>
<body>
  <div class="l1-motion-62">

  <div class="l1-motion-62-box">
    <div class="l1-motion-62-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-62-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library63
标题文字动画
Title Motion Lib
MASK REVEAL 遮罩揭示

遮罩揭示采用clip-path（裁切路径）+ mask reveal（遮罩揭示）。

63 · MASK REVEAL / 遮罩揭示 点击展开代码 展开
clip-path（裁切路径）+ mask reveal（遮罩揭示） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MASK REVEAL / 遮罩揭示</title>
  <style>
  .l1-motion-63{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-63-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-63-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-63-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-63-split .l1-motion-63-title span,
  .l1-motion-63-split .l1-motion-63-subtitle span{display:inline-block;}

   .l1-motion-63-title,
   .l1-motion-63-subtitle{clip-path:inset(0 100% 0 0);animation:l1-motion-63-maskRevealLoop 3300ms cubic-bezier(.22,.72,.17,1) infinite;}

  @keyframes l1-motion-63-maskRevealLoop{0%{opacity:.2;clip-path:inset(0 100% 0 0)}38%,74%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:.2;clip-path:inset(0 0 0 100%)}}
  </style>
</head>
<body>
  <div class="l1-motion-63">

  <div class="l1-motion-63-box">
    <div class="l1-motion-63-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-63-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>
Motion Library64
标题文字动画
Title Motion Lib
FLOAT 轻浮上升

轻浮上升采用translateY（上浮）+ opacity（透明度）。

64 · FLOAT / 轻浮上升 点击展开代码 展开
translateY（上浮）+ opacity（透明度） 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FLOAT / 轻浮上升</title>
  <style>
  .l1-motion-64{min-height:240px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:#fff;
    color:#34383d;
    font-family:Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimHei", sans-serif;}

  .l1-motion-64-box{position:relative;
    z-index:2;
    text-align:center;
    max-width:88%;}

  .l1-motion-64-title{font-size:36px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:.04em;
    white-space:nowrap;}

  .l1-motion-64-subtitle{margin-top:9px;
    font-size:18px;
    line-height:1;
    font-weight:760;
    letter-spacing:.03em;
    white-space:nowrap;}

  .l1-motion-64-split .l1-motion-64-title span,
  .l1-motion-64-split .l1-motion-64-subtitle span{display:inline-block;}

   .l1-motion-64-title,
   .l1-motion-64-subtitle{animation:l1-motion-64-floatLoop 3600ms ease-in-out infinite;}

  @keyframes l1-motion-64-floatLoop{0%{opacity:0;transform:translateY(28px)}36%,74%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-24px)}}
  </style>
</head>
<body>
  <div class="l1-motion-64">

  <div class="l1-motion-64-box">
    <div class="l1-motion-64-title" data-text="标题文字动画">标题文字动画</div>
    <div class="l1-motion-64-subtitle" data-text="Title Motion Lib">Title Motion Lib</div>
  </div>
  </div>
</body>
</html>