CSSのアニメーションの属性はどれらがありますか?

CSS 3では、アニメーション画像、Flashアニメーション、JavaScriptの代わりに多くのWebページでアニメーションを作成できます.
まずアニメーション効果を形成するには、キーフレーム@keyframesを作成する必要があります.キーフレームの定義:@keyframes mymove{from{初期状態属性}to{終了状態属性}}または@keyframes mymove{0%{初期状態属性}50%(中間にキーフレームを追加可能)100%{終了状態属性}}キーフレームが作成されているので、animation属性で呼び出す必要があります
では、アニメーションにはどのような属性がありますか?私について見てください.

1、animation-name

1、オブジェクトに適用されるアニメーション名を設定します.キーの名前です.2、ルール@keyframesと組み合わせて使用する必要があります.例:@keyframes mymove{}animation-name:mymove;

2、animation-duration

オブジェクトアニメーションの持続時間の設定の説明:animation-duration:3 s;アニメーションの完了時間は3 sです

3、animation-timing-function

オブジェクトアニメーションのトランジションタイプアトリビュート値を設定するには:

linear:線形遷移.ベゼル曲線(0.0,0.0,1.0,1.0)

と同等

ease:スムーズな遷移.ベッセル曲線(0.25,0.1,0.25,1.0)

に等しい

ease-in:遅いから速いまで.ベッセル曲線(0.42,0,1.0,1.0)

に等しい

ease-out:速いから遅いまで.ベッセル曲線(0,0,0.58,1.0)

に等しい

ease-in-out:遅いから速いから遅いまで.ベッセル曲線(0.42,0,0.58,1.0)

に等しい

step-start:すぐにアニメーションの各終了フレームの状態

にジャンプ

4、animation-delay

オブジェクトのアニメーション遅延を設定する時間の説明:animation-delay:1 s;アニメーション開始前の遅延時間は1 s

5、animation-direction

オブジェクトアニメーションがループ内でモーションアトリビュート値を反転させるかどうかを設定します.

normal:正常方向

reverse:逆方向運転

alternate:アニメーションは正常に動作してから逆方向に動作し、

を交互に動作し続けます.

alternate-reverse:アニメーションを反転してから正方向に実行し、

を交互に実行し続けます.

6、animation-play-state

オブジェクトアニメーションのステータス属性値を設定します.

animation-play-state:running運動

animation-play-state:paused一時停止

7、animation-iteration-count

オブジェクトアニメーションのサイクル数アトリビュート値を設定するには:

animation-iteration-count:infinite無限ループ

animation-iteration-count numberループの回数を加えると、アニメーションは何度も

ループします.
皆さんの理解を容易にするために、私は小さなdemoを作りました.
やってみてもいいですよ.