一般的なCSS3アニメーションの実装方法

一般的なCSS3アニメーションの実装方法

1. 何ですか

CSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をアニメーション化できるようにする、カスケーディング スタイル シート用の提案されたモジュールです。

要素が徐々にあるスタイルから別のスタイルに移行するプロセスを指します。

一般的なアニメーション効果には、移動、回転、拡大縮小など、多数あります。複雑なアニメーションは、複数の単純なアニメーションを組み合わせたものです。

CSS を使用してアニメーションを実装する方法はいくつかあります。

  • トランジションはグラデーションアニメーションを実装します
  • 変換アニメーション
  • アニメーションはカスタムアニメーションを実装します

2. 実装

トランジションはグラデーションアニメーションを実装します

遷移のプロパティは次のとおりです。

  • プロパティ: 変更が必要なCSSプロパティを入力します
  • 期間: トランジション効果を完了するのに必要な時間単位 (秒またはミリ秒)
  • タイミング関数: 完成したエフェクトのスピードカーブ
  • delay: アニメーション効果の遅延トリガー時間

タイミング関数の値は次のとおりです。

価値説明する
リニア等速(cubic-bezier(0,0,1,1)に等しい)
容易に遅い状態から速い状態へ、そして再び遅い状態へ (cubic-bezier(0.25,0.1,0.25,1))
イーズイン徐々に速くなります(cubic-bezier(0.42,0,1,1)に等しい)
イージーアウトゆっくり減速します(cubic-bezier(0,0,0.58,1)に等しい)
イージーインアウト最初は速く、その後遅くなり(cubic-bezier(0.42,0,0.58,1)に等しい)、徐々に現れて消えていきます。
3次ベジェ(n,n,n,n) 3次ベジェ関数で独自の値を定義します。可能な値は0〜1です。

注: display:none<->display:block など、すべてのプロパティがトランジションで使用できるわけではありません。

例えば、マウスを動かすと変化するアニメーション効果を実現するには

<スタイル>
       .base {
            幅: 100ピクセル;
            高さ: 100px;
            表示: インラインブロック;
            背景色: #0EA9FF;
            境界線の幅: 5px;
            境界線のスタイル: solid;
            境界線の色: #5daf34;
            遷移プロパティ: 幅、高さ、背景色、境界線の幅;
            遷移期間: 2秒;
            遷移タイミング関数: イーズイン;
            遷移遅延: 500ms;
        }

        /*略語*/
        /*遷移: すべて 2 秒のイーズイン 500 ミリ秒;*/
        .base:hover {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: #5daf34;
            境界線の幅: 10px;
            境界線の色: #3a8ee6;
        }
</スタイル>
<div> </div>

変換アニメーション

よく使用される 4 つの関数が含まれています。

  • 翻訳: 変位
  • スケール: ズーム
  • 回転: 回転
  • 傾斜: 傾き

一般的には遷移過剰で使用される

transform はインライン要素をサポートしていないため、使用する前にブロックに変換する必要があることに注意してください。

例えば

<スタイル>
    .base {
        幅: 100ピクセル;
        高さ: 100px;
        表示: インラインブロック;
        背景色: #0EA9FF;
        境界線の幅: 5px;
        境界線のスタイル: solid;
        境界線の色: #5daf34;
        遷移プロパティ: 幅、高さ、背景色、境界線の幅;
        遷移期間: 2秒;
        遷移タイミング関数: イーズイン;
        遷移遅延: 500ms;
    }
    .base2 {
        変換: なし;
        遷移プロパティ: transform;
        遷移遅延: 5ms;
    }

    .base2:ホバー{
        変換: スケール(0.8, 1.5)、回転(35度)、傾斜(5度)、移動(15px, 25px);
    }
</スタイル>
 <div> </div>

ボックスが回転、傾斜、移動、拡大されていることがわかります。

アニメーションはカスタムアニメーションを実装します

アニメーションは、次の 8 つのプロパティの略称です。

財産説明するプロパティ値
アニメーション期間アニメーションがサイクルを完了するのに必要な時間を秒(s)またはミリ秒(ms)で指定します。デフォルト値は0です。
アニメーションタイミング関数アニメーションのタイミング関数、つまりアニメーションの速度曲線を指定します。デフォルトは「ease」です。直線的、イージー、イージーイン、イージーアウト、イージーインアウト
アニメーション遅延アニメーションの遅延時間、つまりアニメーションが開始する時間を指定します。デフォルト値は 0 です。
アニメーションの繰り返し回数アニメーションを再生する回数を指定します。デフォルト値は 1 です。
animation-directionはアニメーションの再生方向を指定しますデフォルトは通常通常、逆、交互、交互逆
アニメーション フィル モードアニメーションの塗りつぶしモードを指定します。デフォルトはなし前方、後方、両方
アニメーション再生状態アニメーションの再生状態(実行中または一時停止)を指定します。デフォルトでは実行中実行中、一時停止中
アニメーション名@keyframesアニメーションの名前を指定します

CSS アニメーションでは、いくつかのキー フレームを定義するだけで、ブラウザーはタイミング関数の補間に基づいて残りのフレームを計算します。

@keyframes でキーフレームを定義する

したがって、要素を円状に回転させたい場合は、開始フレームと終了フレームを定義するだけで済みます。

@keyframes 回転{
    から{
        変換: 回転(0度);
    }
    に{
        変換: 回転(360度);
    }
}

From は最初のフレームを意味し、to は最後のフレームを意味します。

ライフサイクルを説明するためにパーセンテージを使用することもできます

@keyframes 回転{
    0%{
        変換: 回転(0度);
    }
    50%{
        変換: 回転(180度);
    }
    100%{
        変換: 回転(360度);
    }
}

キーフレームを定義したら、それを直接使用できます。

アニメーション: 2秒回転;

結論

財産意味
遷移要素のスタイルを設定するために使用されます。アニメーションに似た効果がありますが、詳細は大きく異なります。
変身要素を回転、拡大縮小、移動、または傾けるために使用されます。スタイル アニメーションの設定とは関係ありません。これは、要素の「外観」を設定するために使用される色と同等です。
翻訳するこれは単なる変換のプロパティ値であり、つまり移動する
アニメーションアニメーションのプロパティを設定するために使用されます。6 つのプロパティを含むショートカット プロパティです。

上記は、一般的な CSS3 アニメーションの実装方法の詳細な内容です。CSS3 アニメーションの実装の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  MySQL の複合インデックスはどのように機能しますか?

>>:  jQueryのコア機能とイベント処理の詳細な説明

推薦する

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

Linux のバックグラウンドで & と nohup を使用する方法

ターミナルやコンソールで作業しているときは、メールを読むなど、もっと重要な作業があるかもしれないので...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

MySQL マスタースレーブの原理と構成の詳細

MySQLのマスタースレーブ構成と原理、参考までに具体的な内容は以下のとおりです。 1. 環境の選択...

LinuxにMySQLをインストールし、外部ネットワークアクセスを構成する例

設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

JavaScript 変数の昇格についての簡単な説明

目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? (1...

js オプション連鎖演算子の使用

序文オプションの連鎖演算子 (?.) を使用すると、チェーン内の各参照が有効であることを明示的に検証...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

JavaScript ではおそらく switch 文を使う必要はない

目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...

Centos7環境でYUMを構築する方法

1. yumソースの設定ファイルを入力します 2.lsで設定ファイルを表示する 3. ディレクトリを...

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...

Centos6.5 に zabbix2.4 をインストールするチュートリアル図

centos-DVD1バージョンシステムの固定IPアドレスは192.168.159.128で、cen...