要約

  • W3Cの2013年初公開草案は、CSS Transitions、CSS Animations、SVGの動きに共通する計時と効果を一つのモデルで扱おうとした。
  • 2014年草案はスクリプトで作り、ブラウザーが実行するアニメーションの入口を示した。2023年文書は現在時刻、停止、逆再生、終了や取消しの状態を細かく定義する。

読者が止めたいのは、飾りとして回る歯車ではない。ネットワーク経路図の分岐点だ。線が右へ曲がる前と後で説明の意味が変わる。編集者はそこを一時停止し、必要なら逆向きにたどらせたい。ところが舞台には三人の係がいる。登場を担当するCSSトランジション、反復を担当するCSSアニメーション、線を動かすSVG。それぞれ時間の言葉が違う。JavaScriptで毎コマを描き直す手もあるが、説明を書く人が三つの時計を直す仕事まで抱えてしまう。

この面倒を見つけたのが、2013年6月25日のW3C初公開草案だった。CSS Transitions、CSS Animations、SVGが似た機能を持ちながら、異なる用語で記述されていると整理する。そこで共通の計時と効果のモデルを提案した。時間軸が位置を与え、効果が途中の値を計算し、複数の効果が対象に重なる。三人の係に同じ時計を見せるための舞台図面である。どの場面で読者を止めるかは、図面には書かれていない。

モデルだけでは、編集者の手はまだ操作盤に届かない。2014年6月5日の草案は抽象モデルに加え、スクリプトで動きを作る入口を説明した。作成後の実行はブラウザーが担う。ページのコールバックが各フレームを塗る方式とは、仕事の分け方が違う。requestAnimationFrameとの時間値や実行順序も整理された。ブラウザーに時計を任せ、編集者は経路図の節目で読者へどんな操作を渡すか考えられる。

「止める」という一語には厄介な中身がある。図の再生がまだ始まっていないときと、線が分岐点を越えた直後とでは、画面に残すべきコマが違う。巻き戻すなら、逆向きに進む現在位置も必要だ。動きの効果そのものと、その効果が今どこまで進んだかを分けて扱わなければ、読者の押したボタンは不意の跳躍を生む。

その分業を2018年10月11日のLevel 1草案は時間軸、アニメーション、効果という構造で扱い続けた。効果は何が変わるかを持ち、時間軸は進行の基準になり、再生状態が待機・進行・停止・終了を区別する。三人の係は動かす対象が違っても、「現在の一コマ」を決める道具を共有できる。読者に渡す操作盤が見た目だけの小道具で終わらない理由だ。

2023年6月5日の草案を開くと、操作盤の難所が具体的に見える。現在時刻と開始時刻を設定し、再生、一時停止、終了、取消しを扱い、速度と逆方向への変更も定義する。さらに準備中や完了時の状態を決める。分岐点で停止を押した瞬間、動きが開始待ちだったらどうするか。最後のコマに着く直前に逆再生したら、次はどちら向きか。細かな状態遷移は、読者が見たい一枚を舞台に残すためにある。

W3Cの公開履歴は2013年、2014年、2018年、2023年の文書を並べる。先に三人の係へ共通の時計を与え、次に編集者の手を操作盤へ伸ばし、停止や逆再生で画面が飛ばないよう状態を詰めた過程だ。スクロール位置を時間の源にする後年の仕事とは、問いの場所が違う。ネットワーク経路のどの曲がり角をもう一度見せるか。そこは今も編集者の仕事であり、ブラウザーはその選択を正しい時刻で支える。