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

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.変換

(1)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> 

(c) 回転(x度)

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> 

(2)3D変形

(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.アニメーション

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

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> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  dockerを使用してdubboプロジェクトをデプロイする方法

>>:  自己終了XHTMLタグを書くときに注意すべきこと

推薦する

Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする

前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

MySQL はエンタープライズレベルのログ管理、バックアップ、リカバリの実践的なチュートリアルを実装します

背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...

jsで七夕告白連打の効果を実現、jQueryで連打技術を実現

この記事では、jsとjQueryテクノロジーを使用して告白弾幕を実現する方法を紹介します。具体的な内...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

SQLインジェクションの詳しい解説 - セキュリティ編(第2部)

この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...

divの背景を透明に設定する方法の例

div の背景を透明にする一般的な方法は 2 つあります。 1. 不透明度属性を 0 ~ 1 の値に...

IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...

ウェブページヘッダーの最適化の提案

ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...

HTMLのimgタグで画像の中心部分だけを表示する方法(3つの方法)

HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...