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
CSS3変換を簡単に生成
コードを書かずに複雑なCSS3変換を作成するための強力で直感的なツール。変更をリアルタイムで視覚化し、生成された CSS をコピーしてプロジェクトで使用します。
完璧なフレックスボックスレイアウトを作成
CSS フレックスボックス コードを視覚化、カスタマイズ、生成するには、直感的なドラッグ アンド ドロップ インターフェイスを使用します。
スタイラスからCSSへのコンバーター
SCSS コードを CSS に変換します。高速、簡単、安全。
速度単位コンバータ
さまざまな速度単位を、エンジニアリング、科学、および日常のニーズに合わせて正確に変換します
テキストから改行を削除する
使いやすいツールで複数行のテキストを1つの連続した行に変換します。
MD4ハッシュジェネレータ
MD4ハッシュを迅速かつ簡単に生成