CSSトランジションの入門ガイド

CSSトランジションは、CSSでアニメーションを作成する最も簡単な方法です。遷移では、プロパティの値を変更し、CSSにいくつかのパラメーターに従って最終状態に向けてゆっくりと変更するように指示します

CSSトランジションの概要

CSSトランジションは、CSSでアニメーションを作成する最も簡単な方法です。

遷移では、プロパティの値を変更し、CSSに、最終状態に向けて、いくつかのパラメーターに従ってゆっくりと変更するように指示します。

CSSトランジションは、次のプロパティによって定義されます。

プロパティ 説明
transition-property 移行する必要があるCSSプロパティ
transition-duration 移行期間
transition-timing-function アニメーションで使用されるタイミング関数(一般的な値:線形、使いやすさ)。デフォルト:ease
transition-delay アニメーションを開始する前に待機するオプションの秒数

ザ・transitionプロパティは便利な省略形です:

.container {
  transition: property duration timing-function delay;
}

CSS移行の例

このコードはCSS遷移を実装します:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two, .four { background: rgba(236, 252, 100, 0.75); }

.circle:hover { background: rgba(142, 92, 205, 0.25); /* lighter */ }

グリッチの例を参照してくださいhttps://glitch.com/edit/#!/flavio-css-transitions-example

ホバリングすると.oneそして.three要素、紫色の円、背景の変更を容易にする遷移アニメーションがありますが、黄色の円にはないため、ありませんtransitionプロパティが定義されています。

遷移タイミング関数の値

transition-timing-function遷移の加速曲線を指定できます。

使用できる簡単な値がいくつかあります。

線形
簡易
イーズイン
イーズアウト
イーズインアウト

このグリッチそれらが実際にどのように機能するかを示しています。

を使用して完全にカスタムのタイミング関数を作成できます立方ベジェ曲線。これはかなり高度ですが、基本的に上記の関数はすべてベジェ曲線を使用して構築されています。一般的な名前なので、便利な名前があります。

ブラウザDevToolsでのCSSトランジション

ザ・ブラウザDevTools遷移を視覚化するための優れた方法を提供します。

これはChromeです:

Debug CSS Transitions in Chrome DevTools

これはFirefoxです:

Debug CSS Transitions in Firefox DevTools

これらのパネルから、コードをリロードせずに、トランジションをライブ編集してページで直接実験することができます。

CSSトランジションを使用してアニメーション化できるプロパティ

たくさん!ただし、すべてのCSSプロパティではありません。

完全なリストは次のとおりです。

プロパティ
バックグラウンド
背景色
背景位置
背景サイズ
境界
ボーダの色
ボーダー幅
ボーダーボトム
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
ボーダー左
ボーダー-左-色
border-left-width
ボーダー半径
ボーダー右
ボーダー-右-色
border-right-width
ボーダー間隔
ボーダートップ
ボーダートップカラー
border-top-left-radius
border-top-right-radius
border-top-width
ボックスシャドウ
キャレットカラー
クリップ
列数
列ギャップ
列ルール
列-ルール-色
列ルール幅
列幅
コンテンツ
フィルタ
フレックス
フレックスベース
フレックスグロー
フレックスシュリンク
フォント
フォントサイズ
font-size-adjust
フォントストレッチ
フォントの太さ
グリッドエリア
grid-auto-columns
グリッド-自動フロー
grid-auto-rows
grid-column-end
グリッド-列-ギャップ
grid-column-start
グリッド-列
グリッドギャップ
grid-row-end
グリッド-行-ギャップ
grid-row-start
グリッド行
grid-template-areas
grid-template-columns
grid-template-rows
グリッドテンプレート
グリッド
高さ
文字間隔
行の高さ
マージン
マージンボトム
マージン左
マージン右
マージントップ
最大高さ
最大幅
最小の高さ
最小幅
不透明度
注文
概要
アウトラインカラー
アウトラインオフセット
アウトライン幅
パディング
パディングボトム
パディング-左
パディング-右
パディングトップ
視点
遠近法-起源
引用符
正しい
タブサイズ
テキスト装飾
テキスト-装飾-色
テキストインデント
テキストシャドウ
変換します。
垂直整列
視認性
単語間隔
z-index

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: