CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行

遷移プロパティの使用法: transition :transition-property transition-duration transition-timing-function 遷移遅延

一緒に指定することも、個別に指定することもできます

transition-property: 遷移するプロパティ (幅、高さなど) です。all はすべてが変更されることを意味します。

transition-duration: 秒またはミリ秒単位での所要時間

transition-timing-function: アニメーションの種類 (モーションカーブ) を指定します。モーションカーブにはいくつかの種類があります。

easy=>徐々に減速（デフォルト値） linear=>一定速度 easy-in=>加速 easy-out=>減速 easy-in-out=>最初に加速してから減速

遷移遅延遅延時間（秒またはミリ秒）

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        
        div {
            幅: 100ピクセル;
            高さ: 200px;
            背景色: 水色;
            遷移: 幅 2 秒、イーズインアウト 0.5 秒。
        }
        
        div:ホバー{
            幅: 500ピクセル;
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>

結果は次のようになります。マウスを上に動かすと、変化は瞬時ではなくなり、過渡的に完了します。

2.変換

（１）2次元変形

(a) 移動 translate(x,y)

移動はピクセルまたはパーセンテージで指定できます。注: 指定されたパーセンテージはボックス自体のサイズのパーセンテージなので、ボックスを配置するときに中央揃えを設定するために使用できます (左: 50% に設定し、ボックス自体の -50% に移動します)。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="ビューポート" content="幅=, 初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 水色;
            遷移: すべて 2;
        }
        
        div:アクティブ{
            変換: translate(200px, 200px);
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>

クリックするとボックスが移動します。配置されたボックスを中央に配置するコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        .fa {
            幅: 300ピクセル;
            高さ: 300px;
            背景色: 水色;
            遷移: すべて 0.5 秒;
            位置: 相対的;
        }
        
        .息子{
            背景色: 赤;
            位置: 絶対;
            左: 50%;
            上位: 50%;
            幅: 100ピクセル;
            高さ: 100px;
            変換: translate(-50%, -50%);
        }

    </スタイル>
</head>

<本文>
    <div class="fa">
        <div class="son"></div>
    </div>

</本文>

</html>

結果は

(b) スケーリングスケール(x, y)

x、y が 1 より大きい値に設定されている場合はズームインされ、1 より小さい値に設定されている場合はズームアウトされます。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 水色;
            マージン: 200px 自動;
            遷移: すべて 2;
        }
        
        div:ホバー{
            変換: スケール(0.5, 2);
        }
    </スタイル>
</head>

<本文>
    <div>

    </div>
</本文>

</html>

x は度数値を指定します。正の値は時計回り、負の値は反時計回りになります。

回転の場合は、 transform-originを使用して回転の中心点を指定できます。また、左上、右上、下の特定のピクセル値を指定することもできます。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 200ピクセル;
            高さ: 100px;
            背景色: 水色;
            マージン: 200px 自動;
            遷移: すべて 2;
            変換原点: 左下;
        }
        
        div:ホバー{
            変換: 回転(120度);
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>

(d) スキュー（x度、y度）

x、y はそれぞれ x 方向と y 方向の傾斜角度を指定します。これは負の値になることもあります。 y 値が指定されていない場合、デフォルト値は 0 になります。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 水色;
            境界線: 1px 実線の赤;
            遷移: すべて 1;
            マージン: 200px 自動;
        }
        
        div:ホバー{
            変換: skew(30deg, 20deg);
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>

（２）３D変形

(a) 回転 (rotateX、rotateY、rotateZ)

3D 回転は 2D と似ていますが、一方が 2 次元座標に基づいており、もう一方が 3 次元座標に基づいている点が異なります。 3 つの値は一緒に指定することも、個別に指定することもできます。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 200ピクセル;
            高さ: 100px;
            背景色: 水色;
            マージン: 200px 自動;
            遷移: すべて 2;
            変換原点: 左下;
        }
        
        div:ホバー{
            変換: rotateX(120deg);
            /* 変換: rotateY(120deg); */
            /* 変換: rotateZ(120deg); */
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>

(b) 移動 (translateX、translateY、translateZ)

3D 移動は、xy 方向の移動に関しては 2D 移動と同じです。 Z方向の動きだけが異なります。 Z 方向への移動は、現実世界では距離が遠ざかったり近づいたりすることを意味します。そのため、Web ページに表示される結果は、近い場合は大きくなり、遠い場合は小さくなります。

Z 軸の動きを効果的にするには、まず視点 (目と画面の間の距離) を設定する必要があります。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        体 {
            パースペクティブ: 1000px;
            /* 値が小さいほど、目が近くなります */
        }
        
        div {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: 水色;
            遷移: すべて 0.5 秒;
            マージン: 200px 自動;
        }
        
        div:ホバー{
            変換: translate3d(0, 0, 200px);
        }
    </スタイル>
</head>

<本文>
    <div>

    </div>
</本文>

</html>

3.アニメーション

（１）アニメーション：アニメーション名 ||アニメーション継続時間 ||アニメーションタイミング関数 ||アニメーション遅延 ||アニメーション反復回数 ||アニメーション方向 ||アニメーション塗りつぶしモード;

animation-name: アニメーション名（@keyframes を使って自分で定義したアニメーション）

アニメーション期間: 期間

animation-timing-function: トランジションのモーションカーブに似たモーションカーブ。

アニメーション遅延: 遅延時間

animation-iteration-count: ループ回数（infinite は無限ループ）

アニメーション方向: 逆方向かどうか (アニメーションが最後から始まって逆方向に再生されるかどうか)

animation-fill-mode: アニメーション再生外の状態 (終了時の状態) を設定します。なし | 前進 (終了時の状態に設定) | 後退 (開始時の状態に設定) | 両方 (開始時または終了時の状態に設定)

animation-play-state: アニメーションの状態を実行開始|一時停止に設定する

(2) @keyframesカスタムアニメーション

フォーマットは以下のとおりです

@keyframes アニメーション名 {
開始から0%
100%まで
}

アニメーション処理を指定するには、from...to を使用するか、0%~100% を使用してアニメーション処理を指定できます。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: 水色;
            /* アニメーション: アニメーション名、アニメーション時間、モーション カーブ、開始タイミング、再生回数、逆方向に再生するかどうか*/
            アニメーション: 5 秒間直線 3 で移動します。
        }
        
        @keyframes 移動 {
            0% {
                変換: translate3d(0, 0, 0);
            }
            25% {
                変換: translate3d(400px, 0, 0);
            }
            50% {
                変換: translate3d(400px, 300px, 0);
            }
            75% {
                変換: translate3d(0, 300px, 0);
            }
            100% {
                変換: translate3d(0, 0, 0);
            }
        }
    </スタイル>
</head>

<本文>
    <div></div>
</本文>

</html>