CSS トランジション生成ツール
CSS トランジションを生成します — プロパティ、再生時間、遅延、イージングを設定し、ホバーできるライブプレビューで確認してから、shorthand、ホバー時の完全なルール、HTML をコピーできます。prefers-reduced-motion のブロックも含まれます。
入力
選択したプロパティに合わせたホバー時の変化をプレビューに適用します。
拡大縮小は倍率です (1.1 = 110%)。移動は px、回転は度で指定します。
出力
トランジションのプレビューがここに表示されます。
transition 宣言
CSS
HTML
役に立ちましたか？
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"property": "background-color",
"duration": "300",
"delay": "0",
"timing": "ease",
"baseColor": "#3b82f6",
"hoverColor": "#8b5cf6",
"reducedMotion": "true"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-transition-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS トランジション生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSS の transition を使うと、プロパティの変化が一瞬で切り替わらず、徐々に変化するようになります。このジェネレーターでは、何をアニメーションさせるか、どれくらいの時間をかけるか、いつ開始するか、どのように加速するかを選び、ホバーできるボックスで結果を確認できます。感覚を見ながら調整してから CSS をコピーできます。
使い方
- アニメーションさせるプロパティを選びます。
allは変化するすべてのプロパティをアニメーションさせます。transformやbackground-colorなどの個別のプロパティを指定すると、より速く、予測しやすくなります。 - 再生時間と遅延をミリ秒で設定します。ホバー効果には 150〜300 ms がレスポンスの良い感覚です。大きな動きには長めの値が向いています。
- タイミング関数を選びます。
ease-outは要素が現れるとき、ease-inは要素が消えるとき、linearは色の変化や進行バーに向いています。4 つの制御点を自分で設定するにはカスタム cubic-bezier() を選び、段階的な効果にはsteps()を選びます。 - ホバー時の状態を調整します（色、
transformの場合は拡大縮小・移動・回転の量）。その後、プレビューにカーソルを合わせて確認します。 - 1 行の
transition宣言、CSS ルール全体、または HTML をコピーします。
知っておくと役立つこと
- トランジションは通常時の状態に記述されるため、カーソルが入るときと出るときの両方で再生されます。非対称なタイミングにしたい場合は、
:hoverに別のtransitionを指定してください。 - 中間値を計算できるプロパティだけがアニメーションします。色、長さ、opacity、transform、シャドウ、filter がこれにあたります。
displayやheight: autoはアニメーションしません。 transformとopacityを優先してください。ブラウザはこれらを、ページのレイアウトを再計算せずに GPU でアニメーションできます。- 生成される CSS には、既定で
prefers-reduced-motionのブロックが含まれます。動きを減らすよう求めている人には、アニメーションが一切再生されません。別の場所でこの設定を処理している場合は、チェックを外してください。 - ビジュアルなカーブエディターが必要なら、CSS Cubic Bezier ジェネレーターをお試しください。
css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend