本文へスキップ
ひとりAIラボ

HTMLアニメーションのエフェクト

なめらかな切り替え

Transition（Easing）

状態が変わるときに、時間と速さの変化（イージング）をつけてつなぐこと。

見本：ボタンを押すと、2つの丸が linear と ease-out で右に動き、速さの違いを比べられる見本。動きを減らす設定のときは、すぐに切り替わります。ひとりAIラボが作った、その場で動くHTMLとCSSです。

使いどころ　色や開け閉めの変化を、自然に見せたいとき。

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

[ボタンやメニュー]の状態が変わるときに、0.2秒の transition をつけてください。イージングは ease-out。動かすのは transform と opacity だけ。動きを減らす設定の人には、transition なしで切り替えてください。

English

Add a 0.2s transition with ease-out easing when [the button or menu] changes state. Transition only transform and opacity. For people who prefer reduced motion, switch states without a transition.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

公式ガイドに載っているか

なめらかな切り替えが各社の公式プロンプトガイドに載っているか
ガイド記載
v0公式記載なし[1][2][3]
Lovable載っている[4]
MDN載っている[5]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

気をつけること

  • 動かすのは transform と opacity にします。レイアウトや描画のやり直しが起きるプロパティは、どうしても必要なとき以外は避けます。[6]

出典

  1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
  2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
  3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
  4. 4.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library
  5. 5.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
  6. 6.web.dev（アニメーションの性能の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/animations-guide

今週の一歩

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、動きが付いたか確かめてください。

できた見本を短い動画にするならClaude Codeで短いモーション動画を作るへ（ターミナルを使います）。