CSS3トランジションジェネレータ
スムーズな不透明度の移行
人気のプリセット
フェードエフェクト
スムーズな不透明度の移行
スケールエフェクト
ホバー時に要素のサイズを変更する
回転効果
ホバー時に要素を回転させる
スライドエフェクト
要素の位置を移動する
色の変更
背景色の移行
トランジションについて
CSS トランジションを使用すると、特定の期間にわたってプロパティ値をスムーズに変更できます。
一般的にアニメーション化されたプロパティには、次のものがあります。
- 幅、高さ
- マージン、パディング
- 不透明度、カラー
- transform (scale, rotate, translate)
- background-color
プロのヒント:「すべてのプロパティ」オプションを使用して、すべての変更をアニメーション化します。
Preview
HOVER ME
生成されたコード
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
トランジションコントロール
300
0
ホバーエフェクト
100%
100%
0°
0px
0px
8px
8px
Related Tools
CSSコンバーターへのレス
LessのコードをCSSに変換します。高速、簡単、安全。
SCSSからCSSへのコンバーター
SCSS コードを CSS に変換します。高速、簡単、安全。
美しいCSSテキストグラデーションを簡単に作成
あなたのウェブサイトのための見事なグラデーションテキスト効果を作成する
完璧なフレックスボックスレイアウトを作成
CSS フレックスボックス コードを視覚化、カスタマイズ、生成するには、直感的なドラッグ アンド ドロップ インターフェイスを使用します。
PantoneからCMYKへ
印刷デザイン用にPantoneカラーをCMYK値に変換する
RGBからHSVへ
RGBカラーをHSV値に変換して、直感的な色操作を実現