コマ送りステップアニメ

CSSのsteps()だけで、なめらかさを意図的に捨てた12fps風のコマ送り質感を作ります。商品紹介をストップモーション動画風に見せたいときや、操作感をコミカルにしたい場面に。3匹が飛び飛びに横断します。

#steps#stop-motion#css-animation

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW: 焙煎したて。コーヒーアイテムがコマ送りで横切る店頭サイン -->
<div class="stage" aria-label="コーヒーアイテムがコマ送りで横断する店頭演出">
  <div class="ground" aria-hidden="true"></div>

  <div class="walker w1" aria-hidden="true">
    <svg class="critter" viewBox="0 0 60 60" width="60" height="60">
      <path d="M18 22 L42 22 L38 54 L22 54 Z" fill="#C97B4A"/>
      <rect x="15" y="17" width="30" height="7" rx="3" fill="#6F4E37"/>
      <rect x="23" y="31" width="14" height="9" rx="2" fill="#F4ECDD"/>
      <path d="M26 14 q4 -5 0 -10 M34 14 q4 -5 0 -10" stroke="#cdb89b" stroke-width="2" fill="none" stroke-linecap="round"/>
    </svg>
    <span class="shadow"></span>
  </div>

  <div class="walker w2" aria-hidden="true">
    <svg class="critter" viewBox="0 0 60 60" width="60" height="60">
      <ellipse cx="30" cy="32" rx="17" ry="22" fill="#4A2C14"/>
      <path d="M30 12 Q22 32 30 52" stroke="#2c1810" stroke-width="3" fill="none"/>
    </svg>
    <span class="shadow"></span>
  </div>

  <div class="walker w3" aria-hidden="true">
    <svg class="critter" viewBox="0 0 60 60" width="60" height="60">
      <path d="M10 42 Q14 24 30 24 Q46 24 50 42 Q40 50 30 46 Q20 50 10 42 Z" fill="#E0A95F"/>
      <path d="M22 31 v11 M30 28 v17 M38 31 v11" stroke="#b9803f" stroke-width="2"/>
    </svg>
    <span class="shadow"></span>
  </div>

  <p class="cap" aria-hidden="true">MOON BREW · ROASTED DAILY</p>
</div>

CSS

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #F4ECDD; }

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 260px;
  max-height: 100%;
  overflow: hidden;
  background: #F4ECDD;
  font-family: Georgia, "Times New Roman", serif;
  animation: jitter .45s steps(2) infinite;
}

.ground {
  position: absolute; left: 0; right: 0; bottom: 34px;
  height: 2px; background: #6F4E37; opacity: .85;
}

.walker {
  position: absolute; left: 0;
  will-change: transform;
  animation: cross 3.2s steps(14) infinite;
}
.w1 { bottom: 120px; }
.w2 { bottom: 64px;  animation-delay: -1.1s; }
.w3 { bottom: 38px;  animation-delay: -2.2s; }

.critter {
  display: block;
  transform-origin: 50% 80%;
  animation: spin .5s steps(2) infinite alternate;
}
.shadow {
  position: absolute; left: 50%; bottom: -6px;
  width: 42px; height: 7px; margin-left: -21px;
  background: rgba(111,78,55,.2);
  border-radius: 50%;
  transform-origin: center;
  animation: foot .5s steps(2) infinite alternate;
}

.cap {
  position: absolute; right: 18px; bottom: 8px; margin: 0;
  font-size: 12px; letter-spacing: .22em; font-weight: 700;
  color: rgba(111,78,55,.55);
}

@keyframes cross { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
@keyframes spin  { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes foot  { from { transform: scaleX(.9); } to { transform: scaleX(1.05); } }
@keyframes jitter { 0% { transform: translate(-1px, 0) rotate(-.6deg); } 100% { transform: translate(1px, 1px) rotate(.6deg); } }

JavaScript

// MOON BREW のコマ送りも CSS の steps() のみで完結（JS不要）。
// 14コマ/3.2s の「飛び」がコマ撮りらしさの正解値。

実装ガイド

使いどころ

商品紹介やストップモーション動画風の見せ方、コミカルな導入演出に。なめらかさをあえて捨てた飛び飛びの動きが、手作り感やレトロ感を与えます。

実装時の注意点

動きの核はCSS animationのsteps(N)です。横移動・自転・接地影・全体の手ブレを別々の短いstepsアニメで重ね、フレームレートの違いから有機的なズレを作ります。JSは不要。コマ数を増やすと普通の滑らかアニメに見えるので、分割数は意図的に少なく（例 14コマ/3.2s）保ちます。

対応ブラウザ

CSS animationのsteps()は全モダンブラウザ（Chrome・Edge・Firefox・Safari）で安定動作し、特殊機能に依存しないため追加要件は少なめです。prefers-reduced-motionで動きを止める/弱める配慮を入れるとよく、具体的な対応バージョンはターゲット環境で確認してください。

よくある失敗

stepsの分割数を増やしすぎる、linear以外のイージングを混ぜると「コマ送り感」が消えます。複数要素の周期を完全に揃えると機械的になり、わずかにズラすと生きます。背景に溶ける淡色だと動きが見えにくいので前景とのコントラストを確保しましょう。

応用例

SVGをブランドキャラに差し替えてフレーム枚数や周期でテンポを調整、背景に紙テクスチャを敷く、効果音と同期させる（音はサイト方針次第）などに発展できます。

コード