WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

CSSアニメーション生成

CSSアニメーションを生成。ライブアニメーションプレビュー付き。

CSS Animation Generator

@keyframes myAnim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: myAnim 1s ease infinite;
}

関連ツール

フレックスボックス生成カラーコード変換（HEX/RGB/HSL）CSS単位変換（px/rem/em）CSSカラー名一覧

CSSアニメーション生成の主な使い方・用途

  • ✓CSSアニメーションの生成
  • ✓@keyframesの作成
  • ✓ローディングアニメーションの設計
  • ✓スクロールアニメーションの実装
  • ✓UIインタラクションの追加

使い方（ステップ別）

  1. 1
    プロパティと値を設定する— アニメーションするCSSプロパティとfrom・to値を設定します。
  2. 2
    タイミングを設定する— duration・timing-function・iteration-countを設定します。
  3. 3
    プレビューを確認してCSSをコピーする— ライブアニメーションを確認してCSSをコピーします。

このツールの特徴

  • ●opacity・transform等のプロパティ対応
  • ●@keyframesとanimation両方の出力
  • ●ライブアニメーションプレビュー
  • ●タイミング関数の選択

このツールについて

CSSアニメーションを生成。ライブアニメーションプレビュー付き。