CSSアニメーション効果アニメーションの一般的なスタイル

CSSアニメーション効果アニメーションの一般的なスタイル

アニメーション

アニメーションを定義します。

/*アニメーションの各ステップで実行されるアクションを定義するキーフレームを設定します*/
@keyframes マイボックス{
            0%{変換: 翻訳(0,0);}
            25%{変換: translate(200px,0);}
            50%{変換: translate(200px,200px);}
            75%{変換: translate(0,200px);}
            100%{変換: 翻訳(0,0);}
        }
/*キーフレームを参照してアニメーションの実行スタイルを設定します*/
アニメーション: mybox 5s 1s 無限;

注記:

1. アニメーションが終了したら初期位置に戻ります。
2. 0% から 100% へ

animation-name: アニメーションの名前(存在する必要があります)

animation-duration: アニメーションの継続時間

animation-delay: アニメーション効果が表示されるまでの時間を指定します

animation-iteration-count: アニメーションが実行される回数を定義します

デフォルト値: 1; 無制限回数: 無限

animation-timing-function: アニメーション効果を定義します animation-fill-mode:

none: デフォルト値。スタイルは遅延後に有効になります。
backwards: スタイルは遅延の前に有効になります。
forwards: アニメーションが終了したら、終了位置で停止します。
両方: 後方と前方の特性を持ちます。

要約する

CSS アニメーション効果のよく使われるスタイルに関するこの記事はこれで終わりです。CSS アニメーションのよく使われるスタイルに関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  VUE レンダリング機能の使い方と詳細な説明

>>:  Zabbix カスタム監視 nginx ステータス実装プロセス

推薦する

ウェブページ作成のテスト問題を全て解けますか?

Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...

MySQL と接続関連のタイムアウトの詳細な概要

MySQL と接続関連のタイムアウト序文:今日、同僚から、データ量が多いときに MySQL データベ...

MySQL トランザクション分離レベルとロックメカニズムの問題に関する深い理解

概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...

ログインインターセプションを実装するためのVueルーティング

目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...

Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

ReactHooks バッチ更新状態とルートパラメータの取得例の分析

目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....

ページング効果を実装するミニプログラム

この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有し...

MySQL 4 の一般的なマスタースレーブレプリケーションアーキテクチャ

目次1つのマスターと複数のスレーブのレプリケーションアーキテクチャマルチレベルレプリケーションアーキ...

MySQL エラー コード 1862 の解決方法: パスワードの有効期限が切れています

ブロガーは 1 ~ 2 か月間 MySQL を使用していませんでしたが、今日この問題に遭遇しました。...

MySQL での %% のようなファジークエリの実装

1、%: 0 個以上の任意の文字を表します。あらゆるタイプと長さの文字に一致します。場合によっては、...

Linux システム (Centos6.5 以上) のインストール JDK チュートリアル分析

記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...

CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...

Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル

準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...