🧰業務効率化
CSSアニメーション・トランジション作成
フェード・スライド・ホバーの動きを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
要素の登場やホバーに使えるCSSアニメーションを、動きを確認しながら作成できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. 動きの例を選ぶ
2. 速度・距離・見た目を調整
3. プレビュー
「ホバーで浮く」は、下の要素にマウスを重ねるかキーボードで選択して確認できます。
4. CSSとHTMLをコピー
使うときのポイント
- 強い動きや繰り返しは使いすぎず、ユーザーの操作や注目してほしい箇所に絞ると見やすくなります。
- 生成CSSには、端末の「動きを減らす」設定に合わせてアニメーションを止める処理を含めています。
- ホバー効果はキーボード操作でも確認できるよう、
:focus-visibleにも同じ動きを設定します。