Toolipedia 埋め込み
JA
← すべてのテキストツール

CSSアニメーションジェネレーター

バウンス、フェード、シェイク、スライドなどを@keyframesとして、コピーしてすぐ使える形で提供します。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSSアニメーションジェネレーター

バウンス、フェード、シェイク、パルス、スライドなどの既成のエフェクトを選び、継続時間と遅延を調整して、animationプロパティ付きの@keyframesルールをコピーできます。可能な限りtransformとopacityにとどめましょう。ブラウザーはページレイアウトを再計算せずに、これらをなめらかにアニメーションできるからです。

CSSアニメーションジェネレーターの使い方

  1. バウンス、フェード、シェイク、スライドなどのエフェクトを選択してください。
  2. 所要時間と遅延を設定して、プレビューを見てください。
  3. キーフレームとanimationプロパティをCSSにコピーしてください。

このツールを使う理由

別名

よくある質問

CSSアニメーションを永久にループさせるにはどうしますか?

animation-iteration-countをinfiniteに設定するか、animationのショートハンドでinfiniteを使います。ease-in-outなどのタイミング関数を加えると、ループが自然に感じられます。

アニメーションを1回だけ実行するにはどうすればよいですか?

反復回数を、無限ではなく1に設定してください。そのあとも、要素を最終状態のままにしたい場合は、fill-mode forwardsを追加してください。

要素にアニメーションを使うにはどうすればよいですか?

キーフレームをスタイルシートに貼り付けて、動かしたい要素のクラスに、animationプロパティを追加してください。

CSSアニメーションジェネレーターは無料ですか？

はい。ToolipediaのCSSアニメーションジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSSアニメーションジェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール