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
SCSSからCSSへのコンバーター
SCSS コードを CSS に変換します。高速、簡単、安全。
CSSコンバーターへのレス
LessのコードをCSSに変換します。高速、簡単、安全。
SassからCSSへのコンバーター
SassコードをCSSに変換します。高速、簡単、安全。
Base64エンコード&デコードツールキット
Base64文字列のエンコードとデコードは、ブラウザで簡単に行うことができます。
CSS3変換を簡単に生成
コードを書かずに複雑なCSS3変換を作成するための強力で直感的なツール。変更をリアルタイムで視覚化し、生成された CSS をコピーしてプロジェクトで使用します。
MD4ハッシュジェネレータ
MD4ハッシュを迅速かつ簡単に生成