モーション事典 一覧
MotionLang のモーション事典 一覧。112 件の動きについて、中国語・英語・日本語の名前、一行の定義、使いどころ、パラメータ、レシピ、AI にそのまま渡せる一文を載せています。
112 件 · 語彙の更新 2026-10-09
登場と退場 8
要素が初めて画面に現れるときの見せ方。どう現れるか、方向を持たせるか。
- フェードイン淡入 要素が透明な状態からその場で浮かび上がります
- スライドイン滑入 要素が画面外や片側から定位置へ滑り込みます
- スケールイン缩放进入 要素が少し小さい状態(約 0.9 倍)から元の大きさへ拡大し、カメラに近づくように注意を集めます
- ポップイン弹出 小さめのサイズから素早く拡大し、最後に少し行き過ぎてから収まります
- リビール揭示 マスクやクリップで要素を少しずつ見せていきます
- 語ごとのマスク表示逐词遮罩揭示 見出しの各語が、見えない横の隙間から順に立ち上がります
- ぼかしから寄る画像图片模糊聚拢 画像はまずぼけた色の塊で、少し拡大しています
- 起動時のローディング开场加载序列 起動すると全画面の下地が現れ、中央の数字が 0 から 100 まで数えられ、下の線が同じだけ伸びます
シーケンスとタイミング 5
複数のアニメーションの順番と長さが合わさって生まれるリズム。
- キーフレーム关键帧 アニメーションをいくつかの時点の状態(0%、50%、100%)に分け、その間はブラウザに補間させます
- スタッガー错峰 同じ種類の要素が一斉にではなく、順番に少しずつ遅れて動き、波が走るように見えます
- オーケストレーション编排 どの要素が先でどれが後か、それぞれ何秒かを決め、複数の動きが一文のように読めるようにします
- 時間と遅延时长与延迟 時間は動きの速さを、遅延は始まるタイミングを決めます
- ステップアニメーション分步动画 連続的な変化を等分し、滑らかに動かず 1 段ずつ跳ばします
移動と変形 7
中身を変えずに、位置・角度・向きを変える動き。
- 移動(トランスレート)位移 要素を X・Y・Z 軸に沿ってまとめて動かします
- 回転旋转 要素をある点を中心に角度ぶん回します
- スキュー斜切 長方形を片方向へ押し倒して平行四辺形にします
- 3D チルト3D 倾斜 マウスや指の位置に合わせてカードが 3D 空間でわずかに傾きます
- トランスフォーム原点变换原点 拡大縮小や回転がどの点を中心に起きるかを指定します
- 起点に合わせた動き从触发点生长 ポップオーバーがクリックされたボタンの位置から伸び、閉じるときも同じ点に戻ります
- ドラッグで回る 3D 展示拖拽环绕 3D 展厅 左右にドラッグしても動くのは商品ではなく、自分が棚の周りを回っています
状態間のトランジション 12
同じ画面の中で、内容が A の状態から B の状態へ変わる過程。
- クロスフェード交叉淡化 古い内容が薄くなる間に新しい内容が現れ、少し重なります
- モーフ形变 同じものが形・大きさ・角丸を変えながら連続的に別の姿へ変わります
- 共有要素トランジション共享元素转场 一覧のサムネイルが詳細を開くときに新しい位置へ飛んで拡大し、2 つの画面が同じ空間につながって見えます
- レイアウトアニメーション布局动画 要素が増減したり位置が変わるとき、他の要素が滑らかにどいたり詰めたりします
- アコーディオン手风琴折叠 一部が開いたり閉じたりするとき、高さが滑らかに変わり、下の内容も押し出されたり戻ったりします
- 方向を持ったトランジション有方向感的转场 進むときは新しい画面が右から、戻るときは左から入ります
- ピクセル溶解像素溶解 次の画像はフェードではなく、マス目ごとに「生えて」きます
- 図形マスクの画面遷移形状蒙版转场 一度タップすると、複数の色帯が下から上へ全画面を覆い、古い内容を隠し、そのまま上へ抜けて新しい内容が現れます
- カードの全画面展開卡片撑满全屏 角丸のカードをタップすると、角丸ごと画面いっぱいまで育ちます
- ページを持ち上げる遷移整页掀起转场 次のページへ進むとき、今のページが視線の下から持ち上げられ、少し回転しながら向こうへ倒れます
- 原点からの円形展開原点圆形扩散 アイコンをタップすると、層全体はフェードでも横からの進入でもなく、アイコンのある点から波紋のように円を描いて広がり、画面いっぱいまで達します
- シェーダー画像遷移着色器图像过渡 2 枚の画像の切り替えはフェードではありません
スクロール 13
スクロールに連動する動き。どこまで・どれだけ速く転がしたかで変化します。
- スクロールリビール滚动进入 要素が表示領域に入ったときに初めて登場します
- スクロール駆動アニメーション滚动驱动 進行度がスクロール位置に直接結び付きます
- パララックス视差 背景を前景より遅く動かし、前後がずれる奥行き感を作ります
- ビュートランジション视图转场 ブラウザが切り替えの前後でそれぞれ画面を記録し、その差分を自動でアニメーションとして補います
- 読書の進捗阅读进度 上部の細い線がスクロール量に応じて伸び、右の目盛りが全体の何番目かを示します
- スムーススクロール制御平滑滚动接管 ホイールを一回転させても内容はすぐには付いてこず、少し重みを持って追いつきます
- スクロール方向で収納するナビ按滚动方向收纳导航 下へ読み進めると上部のバーが自分から引っ込み、画面を内容に譲ります
- 横スクロール区間横向滚动区段 下へスクロールしているのに、この区間は横へ動きます
- スクロールで語が点灯滚动逐词点亮 灰色がかった段落が、スクロールに従って一語ずつ霧から抜けて鮮明になります
- スクロールで焦点を絞る滚动分档失焦 大きな文章の塊が画面に留まり、読んでいる段落だけが鮮明で、他は柔らかくぼけます
- 散らばりから整列へ从散落聚拢 カードの列は最初、ばらばらに散っています
- スクロールで再生位置を動かす滚动推播放头 本来は自動で再生されるアニメーションが、自分では進みません
- スクロールのコマ送り滚动逐帧序列 動画に見えますが、実体は事前レンダリングした静止画の束です(デモでは実商品の写真 36 枚)
フィードバックと操作 15
操作の直後に返ってくる反応。操作が効いたことを確かめます。
- ホバーフィードバック悬停反馈 マウスが押せる要素の上に来ると、ごく短時間で色や明るさが変わり、押せることが伝わります
- 押下フィードバック按压反馈 押している間だけ少し縮むか暗くなり、指が「押せた」と感じます
- 長押し確認长按确认 押し続けるとプログレスリングが満ちていき、満杯になって初めて実行されます
- ドラッグ拖拽 要素がカーソルや指に追従し、動く量は完全にユーザー次第です
- ドラッグ並べ替え拖拽排序 項目を押して別の位置へ運ぶと、他の項目がその場で場所を空けます
- スワイプで閉じる滑动关闭 項目を横にスワイプして押しのけます
- ラバーバンド橡皮筋回弹 境界を越えても少しだけ引けますが、引くほど重くなり、離すとゴムのように戻ります
- シェイク抖动 要素が左右に素早く数回揺れ、ここでエラーがあり入力が受け付けられなかったことをはっきり伝えます
- リップル涟漪 押した場所から薄れていく波紋が広がり、操作が効いたことを絵として示します
- ステッカーをめくる贴纸揭角 ポインタを角に近づけるとめくれ、下の層が覗きます
- グレアの走り高光扫过 ポインタが入ると斜めの光が走り、ポインタ付近がわずかに明るくなります
- ホバーで他を退かせる悬停让其它项退让 リストの一行にポインタを置くと、動くのは他の行です
- マグネット吸着磁吸吸附 ポインタがボタンに近づくと、ボタン自体が引き寄せられるように少し動きます
- 反転して追うカーソル反色跟随光标 自作の円がポインタを追いますが、常に半拍遅れます
- ホバーで追うプレビュー悬停预览跟随 メニューの名前の上をポインタが通ると、プレビューがポインタの位置から現れて付いてきます
イージング 7
時間に対する速度の変化。動きの硬さや自然さを決めます。
- イージング缓动 時間に対して速度がどう変わるか
- イーズアウト缓出 最初は速く、終点に近づくほど遅くなります
- イーズイン缓入 最初は遅く、進むほど速くなります
- イーズインアウト缓入缓出 両端が遅く真ん中が速い対称な動きです
- リニア匀速 最後まで速度が変わらず、加速も減速もありません
- ベジェ曲線贝塞尔曲线 4 つの数値で速度の曲線を表す書き方で、名前付きイージングの一般形です
- 非対称イージング非对称缓动 行きと戻りで別の曲線を使います
スプリング 5
実物のような動き。質量と速度があり、途中で中断もできます。
- スプリング弹簧 剛性と減衰で動きを表し、要素がバネに引かれるように動きます
- バウンス回弹 減衰を低くすると、要素は目標を通り過ぎてから戻り、はっきりした跳ね返りが出ます
- 慣性惯性 離してもすぐには止まらず、離した瞬間の速度で滑り続け、少しずつ減速します
- 速度の引き継ぎ速度继承 新しい動きは今この瞬間の実際の速度から続きます
- 中断可能なアニメーション可打断动画 途中でユーザーが操作すると、動きは現在位置から新しい目標へ向きを変えます
ループとアンビエント 8
繰り返し再生される動き。雰囲気を保ち、継続中の状態を伝えます。
- マーキー跑马灯 内容が表示帯を一定速度で横切り、ループします
- 往復ループ往复循环 順再生のあと自動で逆再生し、往復します
- オービット环绕 ある要素が別の要素の中心の周りを回ります
- パルス脉动 要素がリズムよく拡大縮小したり明暗を変えたりし、鼓動のように繰り返して動作中であることを伝えます
- フロート漂浮 要素が小さな振幅で長い周期のままゆっくり上下し、水面に浮かんでいるように見えます
- アイドルアニメーション待机动画 画面が静かになったあとも、どこかがごくわずかに動き続け、アプリが生きて待っていると感じさせます
- グラデーションの流れ渐变流动 背景の色は止まっていません
- 液体のようなパス変形液态路径形变 いくつかの装飾図形がゆっくり変形し続けます
ディテールと演出 11
細部を上質に見せる手法。使うのは重要な 1〜2 か所に絞ります。
- クリップパス裁剪路径 ある形で要素の見える部分を決め、それ以外は切り落とされたようになります
- ビフォーアフタースライダー前后对比滑块 縦の仕切りがビフォーとアフターの 2 枚を分け、ドラッグすると変化の過程が見えます
- 線画アニメーション线条自绘 線がペンで描かれていくように始点から終点へ伸びます
- テキストモーフ文字形变 ある語が別の語に入れ替わるとき、古い語は上へ抜けながら消え、新しい語が下から入ります
- スケルトン骨架屏微光 読み込み中はグレーのブロックが場所を押さえ、光がゆっくり走ります
- ナンバーティッカー数字滚动 数値は新しい値へ飛ぶのではなく、古い値から素早く回って移ります
- タイプライター打字机 文字が 1 文字ずつ現れ、誰かがその場で入力しているように見えます
- テキスト・スクランブル文字乱码解码 意味のない文字が素早く点滅し、左から右へ解読するように本物のテキストへ確定していきます
- 二重コピーの色塗り双色刷色 一行の色が「塗り込まれて」いきます
- 近さで変わる字の太さ可变字重跟随 ポインタが一行をなぞると、近い文字が太く広くなります
- ノイズレンズの露出圆形噪点透镜 ポインタが画面を動くと、縁が柔らかく粒状の円が付いてきます
モーションの原則 4
良い動きを支える基本原則と、越えてはいけない一線。
- 予備動作预备动作 本番の前に逆方向へ少しだけ動かします
- フォロースルー跟随与余势 本体が止まったあとも、付随する部分が少しの間動き続けてから止まります
- スクワッシュ&ストレッチ挤压与拉伸 動きの中で要素を潰したり伸ばしたりし、弾力のあるものが着地・離陸するときの変形をまねます
- モーションの抑制减弱动效 システムで動きの抑制を有効にしている人には、フェードか静止の結果を返します
文字エフェクト 5
文字そのものが動きます。字が落ちてくる、光が走る。動くのは内容ではなく字形です。
- 文字の落下文字坠落 一文字ずつ上から落ち、跳ねて、潰れてから止まります
- 文字の光沢文字光泽 金属の反射のように光の帯が文字を横切ります
- パス上の文字环绕文字 文字は直線ではなく曲線に沿って並びます
- 文字の反転翻转文字 1 つの語が前に倒れ、次が後ろから立ち上がり、一瞬だけ空白になります
- 波打つ文字波浪文字 各文字が位相をずらした正弦波で上下し、1 つの波が文字を伝わります
カーソルとポインタ 4
押す前から画面が反応します。ポインタがそばを通る、どこで止まるかで見え方が変わります。
- カーソルの軌跡光标拖尾 ポインタの後ろに、小さくなりながら消える要素(ここでは商品写真)が落ちていきます
- ポインタのスポット指针聚光 光がポインタを追い、近くだけを照らして縁を光らせます
- 近接拡大邻近放大 ポインタが近づいた項目が大きくなり持ち上がり、隣は順に小さくなります
- ロックオン照準锁定准星 ポインタが四隅の照準に変わります
雰囲気と背景 5
背景いっぱいに広がり、ゆっくり動き続ける演出です。部品ではなく、ページの空気が動きます。
- オーロラのベール极光渐变 大きな柔らかい色がゆっくり漂い、境界は常にぼけています
- 漂う粒子粒子漂浮 小さな粒が画面の中をゆっくり漂います
- 走る縁取り描边流光 短い光の帯がカードの縁を一周し、後ろにぼけた尾を引きます
- 反応するグリッド网格感应 整った点のグリッドが背景に敷かれ、ポインタの近くの点が明るく少し大きくなります
- フィルムグレイン胶片颗粒 細かいノイズが写真の上に乗り、毎フレーム変わります
液体と有機 3
水滴のように引き合い、溶け合い、また分かれます。形は自分で均衡を探し、輪郭は常になめらかです。
- メタボール融球 球の周りを小さな衛星が回り、近づくと間に橋が伸び、離れると切れます
- 流体の球流体球 ガラスの球の中で何層もの色が交差して流れ続け、表面のハイライトがポインタを追います
- 液体インジケータ液态指示器 選択中の塊が伸びてから収まり、途中で元の位置とつながります