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タグを書くときに注意すべきこと

推薦する

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

シンプルなウェブデザインコンセプトのカラーマッチング

(I)ウェブページのカラーマッチングの基本概念(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言う...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

mysql5.7 リモート アクセス設定

mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...

トランザクション分離レベルのMySQLケース分析

目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...

MySQL 実践演習 シンプルなライブラリ管理システム

目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。

オプションに属性 selected = "selected" を追加すると、それ...

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...

MySQL InnoDBとMyISAMの違いを簡単に理解する

序文MySQL は、myisam、innodb、memory、archive、example など、...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクト...