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