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テキストグラデーションを簡単に作成
あなたのウェブサイトのための見事なグラデーションテキスト効果を作成する
ASCIIからバイナリへ
ASCII文字をバイナリコードに簡単に変換
画像からBase64へのコンバーター
Web開発とデータ埋め込みのために画像をBase64エンコーディングに変換
長さコンバーター
異なる長さの単位間で簡単かつ正確に変換します。日常の使用やプロフェッショナルなアプリケーションに最適です。