CSS アニメーション プロパティの使用方法とサンプル コード (transition/transform/animation)

CSS アニメーション プロパティの使用方法とサンプル コード (transition/transform/animation)

開発中、優れたユーザー インターフェイスには常にいくつかのアニメーションが組み込まれます。 CSS は最小限のコードでユーザーに最高の体験を提供します。以下に、CSS アニメーション属性の使用方法とユースケース コードをいくつかまとめましたので、ご参照ください。間違いがあれば、直接コメントしていただければ幸いです。

1 遷移

使用構文:

transition: プロパティ期間タイミング関数遅延;

パラメータ:

(1) プロパティ(トランジション効果を設定するためのCSSプロパティ名):none | all | property。 none は、どのプロパティもトランジション効果を取得しないことを意味し、all はすべてのプロパティがトランジション効果を取得することを意味します。property は、複数のプロパティがカンマ (,) で区切られた CSS プロパティ リストを意味します。

(2)継続時間(トランジション効果を完了するまでの時間を設定します):秒またはミリ秒(s/ms)。

(3) タイミング関数 (効果の速度曲線を設定します): linear、効果が同じ速度で開始および終了することを指定します。cubic-bezier(0,0,1,1) に相当します。ease、ゆっくり開始してゆっくり終了します。cubic-bezier(0.25,0.1,0.25,1) に相当します。ease-in、ゆっくり開始します。cubic-bezier(0.42,0,1,1) に相当します。ease-out、ゆっくり終了します。cubic-bezier(0,0,0.58,1) に相当します。ease-in-out、ゆっくり開始してゆっくり終了します。cubic-bezier(0.42,0,0.58,1) に相当します。cubic-bezier(n,n,n,n)、この関数で独自の値を定義します。値は 0 から 1 の間です。

(4) 遅延(トランジション効果の開始時間):トランジション効果が実行されるまでにかかる秒数の値。たとえば、2sは2秒後に実行されることを意味します。

2 変換

transform プロパティは 2D または 3D 変換を適用します。このプロパティを使用すると、要素に対して回転、拡大縮小、傾斜、移動の 4 つの操作を実行できます。

使用する構文:

変換: なし|変換関数;

パラメータ:

(1)なし:変換が行われないことを定義します。これは通常、変換を登録するために使用されます。

(2)transform-functions:変換する型関数を定義する。主なものは次のとおりです。

回転:主に2D回転と3D回転に分かれます。 rotate(angle)、2D 回転、パラメータは角度 (45deg など)。rotate(x,y,z,angle)、3D 回転、元の位置から (x,y,z) までの線の周りの 3D 回転。rotateX(angle)、X 軸に沿った 3D 回転。rotateY(angle)、rotateZ(angle)。

スケール: 通常は要素のサイズを設定するために使用されます。主なタイプは上記と同じで、scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z) などがあります。ここで、x、y、z は収縮率です。

傾斜: 主に要素のスタイルを傾けるために使用されます。 skew(x-angle, y-angle)、x軸とy軸に沿った2D skew変換、skewX(angle)、x軸に沿った2D skew変換、skew(angle)、y軸に沿った2D skew変換。

移動(移動):主に要素を移動するために使用されます。 translate(x, y) は、x 軸と y 軸に沿って移動するピクセル ポイントを定義します。translate(x, y, z) は、x 軸、y 軸、z 軸に沿って移動するピクセル ポイントを定義します。translateX(x)、translateY(y)、translateZ(z)。

3 アニメーション

このプロパティは主にアニメーションのプロパティを設定するために使用されます。

使用する構文:

アニメーション: 名前 期間 タイミング関数 遅延 反復回数 方向;

パラメータ:

(1)名前:セレクターにバインドする必要があるキーフレーム名。

(2)継続時間:アニメーションを完了するのに必要な時間(秒またはミリ秒単位)。

(3)タイミング関数:アニメーションの動作速度曲線。 linear は、速度の開始と終了が同じ速度で行われることを指定します。これは、cubic-bezier(0,0,1,1) と同等です。ease は、ゆっくり開始してゆっくり終了します。これは、cubic-bezier(0.25,0.1,0.25,1) と同等です。ease-in は、ゆっくり開始し、cubic-bezier(0.42,0,1,1) と同等です。ease-out は、ゆっくり終了し、cubic-bezier(0,0,0.58,1) と同等です。ease-in-out は、ゆっくり開始してゆっくり終了します。これは、cubic-bezier(0.42,0,0.58,1) と同等です。cubic-bezier(n,n,n,n) は、この関数で独自の値を定義し、値は 0 から 1 の間です。

(4)遅延:アニメーションが開始するまでの遅延を設定します。

(5)反復回数:アニメーションの実行回数を設定します。

(6)方向:アニメーションを逆方向にポーリングするかどうか。 normal はデフォルト値で、アニメーションは通常どおり再生されます。alternative はアニメーションを逆の順序で再生します。

以下に、これらの要素のテスト コードを示します。

<!DOCTYPE html>
<html>
<ヘッド>
    <title>トランジション/変換</title>
</head>
<スタイル タイプ="text/css">
    #div1 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 赤;
    }
    #div2 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 緑;
    }
    #div3 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: 青;
    }
    #div4 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #234F21;
    }
    #div5 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #af123c;
    }
    #div6 {
        フロート: 左;
        高さ: 100px;
        幅: 100ピクセル;
        背景色: #affa3c;
    }
    /* トランジションは複数のプロパティを実装します */
    #div1:アクティブ{
        幅:200px;
        高さ: 200px;
        トランジション: 幅 2 秒のイーズ、高さ 2 秒のイーズ。
        -moz-transition: 幅 2s 遷移、高さ 2s 遷移; /* Firefox 4 */
        -webkit-transition: width 2s easy, height 2s easy; /* Safari および Chrome */
        -o-transition: width 2s easy,height 2s easy; /* Opera */
    }
    /* 変換 回転 */
    #div2:ホバー{
        変換:回転(35度);
        -ms-transform:rotate(35deg); /* IE 9 */
        -moz-transform:rotate(35deg); /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari と Chrome */
        -o-transform:rotate(35deg); /* オペラ */
    }
    /* スケールを変換 */
    #div3:ホバー{
        変換:スケール(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5); /* IE 9 */
        -moz-transform:scale(0.8, 1.5); /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari と Chrome */
        -o-transform:scale(0.8, 1.5); /* オペラ */
    }
    /* スキューを変換する */
    #div4:ホバー{
        変換:skew(35度);
        -ms-transform:skew(35deg); /* IE 9 */
        -moz-transform:skew(35deg); /* Firefox */
        -webkit-transform:skew(35deg); /* Safari と Chrome */
        -o-transform:skew(35deg); /* オペラ */
    }
    /* 変換 翻訳 */
    #div5:ホバー{
        変換:translate(45px, 45px);
        -ms-transform:translate(45px, 45px); /* IE 9 */
        -moz-transform:translate(45px, 45px); /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari と Chrome */
        -o-transform:translate(45px, 45px); /* オペラ */
    }
    /* 複数のエフェクトを変換する */
    #div6:ホバー{
        変換:回転(35度)、スケール(0.8, 1.5)、傾斜(35度)、移動(45ピクセル, 45ピクセル);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px) translate(45px, 45px); /* Safari と Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* オペラ */
    }
</スタイル>
<本文>
    <div id="div1">トランジション</div>
    <div id="div2">変換 回転</div>
    <div id="div3">変換スケール</div>
    <div id="div4">変形スキュー</div>
    <div id="div5">変換 翻訳</div>
    <div id="div6">変換</div>
</本文>
</html>

<!DOCTYPE html>
<html>
<ヘッド>
    <title>トランジション/変換</title>
</head>
<スタイル タイプ="text/css">
    /* アニメーション */
    .div7 {
        幅:100ピクセル;
        高さ:100px;
        背景:赤;
        位置:相対;
        アニメーション:myfirst 5s infinite;
        アニメーションの方向:代替;
        /* Safari と Chrome */
        -webkit-animation:myfirst 5s 無限;
        -webkit-アニメーション-方向:代替;
    }
    @keyframes myfirst{
        0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
    }
    @-webkit-keyframes myfirst{/* Safari と Chrome */
        0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
    }
  @-moz-keyframes myfirst #Firefox#
    0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
  }
  @-o-keyframes myfirst オペラ */
    0% {背景:赤; 左:0px; 上:0px;}
        25% {背景:黄色; 左:200ピクセル; 上:0ピクセル;}
        50% {背景:青; 左:200ピクセル; 上:200ピクセル;}
        75% {背景:緑; 左:0px; 上:200px;}
        100% {背景:赤; 左:0px; 上:0px;}
  }
</style> <body> <div class="div7">アニメーション</div> </body> </html>

要約する

以上が、エディターによる CSS アニメーション属性の使用方法とサンプルコード (トランジション/変換/アニメーション) の紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。

<<:  DockerでLinuxシェルコマンドを実行する方法

>>:  よくある HTML タグの記述エラー

推薦する

CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...

HTML マークアップ言語 - フォーム

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]

この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...

Dockerを使用してRedisクラスターを構築する方法

目次1. Redis Dockerベースイメージを作成する2. Redisノードイメージを作成する3...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

Flutterを使用して移動可能なスタックウィジェット機能を作成する

この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

VirtualBox Centos7 の NAT+ホストオンリーネットワークの落とし穴のまとめ

目次1. 問題の背景2. 仮想マシン ネットワーク カードの接続方法は何ですか? 2.1 NAT 2...

Ubuntu 20.04にSogou入力方式をインストールする詳細な手順

1. Fcitx入力フレームワークをインストールする関連する依存ライブラリとフレームワークは自動的に...

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

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

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

MySQL データベース インデックスの面接の質問 (基本的なプログラマー スキル)

目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...

Linux のロード vmlinux デバッグ

gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...