「CSS3」アニメーション詳細説明_html/css_WEB-ITnose

CSS3 は多くの変換関数を提供します:

• 2D: 移動、回転、拡大縮小、傾斜

• 3D: 翻訳 3d、回転 3d、スケール 3d、傾斜 3d。

これらの関数を値として使用するだけです。変換属性の を使用して、対応する効果を設定できます。

CSS3 アニメーションは、設定した方法に従って、これらの効果と他の CSS プロパティを相互に変換します。

1. アニメーション関連のプロパティ

プロパティ	説明
@keyframes	アニメーションの各段階のステータスを定義するコードスニペット
アニメーション	概要すべてのアニメーション プロパティの説明 属性の書き込みただし、animation-play -state プロパティと anime-fill-mode プロパティは除きます。
animation-name	@keyframes アニメーションの名前を指定します。
animation-duration	アニメーションが 1 サイクル完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。
animation-timing-function	アニメーションのスピードカーブを指定します。デフォルトは簡単です。
animation-delay	アニメーションの開始時期を指定します。デフォルトは 0 です。
animation-iteration-count	アニメーションの再生回数を指定します。デフォルトは 1 です。
animation-direction	次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは通常です。
animation-play-state	アニメーションが実行中か一時停止中かを指定します。デフォルトは実行中です。
animation-fill-mode	アニメーションの開始前と完了後の要素の状態を指定します。デフォルトは none です。

@keyframes

アニメーションの各ステージの状態を定義するコード スニペット。たとえば、開始状態、終了状態、中間状態 (パーセンテージで表現) などです。

@keyframes exampleName {    from {        transform: rotateY(0deg);        background: #000000;    }    50% {        transform: rotateY(180deg);        background: #00fa7e;    }    to {        transform: rotateY(0deg);        background: #008dff;    }}

animation-name

上記の exampleName など、@keyframes で定義された状態コレクション名を使用します。

animation-duration

アニメーションのサイクル時間。単位は秒 (s) またはミリ秒 (ms) です。

animation-timing-function

アニメーション変更速度関数には、次のオプションがあります:

• linear: 速度は変更されません。

• イーズイン：低速スタート〜通常速度。

• イーズアウト：通常速度〜低速終了。

• イーズインアウト：低速開始〜通常速度〜低速終了。

• ease: 基本的にイーズインアウトと同じですが、開始が終了よりわずかに速くなります。

• cubic-bezier(x1, y1, x2, y2): 3 次ベジェ関数を速度関数として使用します。

アニメーション遅延

アニメーションが開始するまでの待機時間。単位は秒 (s) またはミリ秒 (ms) です。

animation-iteration-count

アニメーションのループ数。特定の回数にすることも、無限 (無限ループ再生) にすることもできます。

animation-direction

アニメーションループの方向:

• normal: 順方向に再生します。

• リバース: 逆方向に再生します。

• alternate: 順方向再生と逆方向再生を交互に行います。

animation

上記の 6 つの属性は、この属性で表すことができます。形式は次のとおりです:

animate: name duration timing-function delay iteration-count direction;

animation-play-state

アニメーションの状態を制御します。実行中と一時停止の 2 つの状態があります。

animation-fill-mode

アニメーションの開始前と完了後の要素の状態を指定します。

• none: アニメーションの前後の要素の状態はアニメーションと関係がありません。

• forwards: アニメーションが完了した後、要素はアニメーションの最終状態を維持します。

• backwards: アニメーションが開始される前、要素はアニメーションが開始された状態のままです。

• 両方: 前方と後方の組み合わせ。

2. トランジション

アニメーション関連の属性に加えて、CSS3 は次の形式のトランジション属性も提供します。状態になり、再生回数が 1 回になり、アニメーションを一時停止できません。

3. デモ

https://github.com/JasonKid/fezone/tree/master/CSS3/%E5%8A%A8%E7%94%BB%E8%AF%A6%E8%A7%A3