CSS3アニメーションのプロパティとは何ですか?

step() は、変換の期間を等しいサイズの間隔に分割できます。または、出力パーセンテージの変化が間隔の開始時と終了時に発生するかどうかを指定します。

最初のパラメータ番号は指定された間隔数です。つまり、アニメーションは段階的に表示するために n 個のステップに分割されます。これにより、最後のステップの開始時の状態が設定されます。設定がanimation-fill-modeの効果と矛盾する場合、animation-fill-modeの設定がアニメーションの終了状態となります。

##cubic-bezier(,,,)：

アニメーション遅延属性: アニメーションの開始時期 (開始時間) を定義します。これにより、アプリケーション後の特定の時間にアニメーションの実行を開始したり、アプリケーションの前にアニメーションを表示したりできます。かなり前から実装されているようです。

初期値は「0」です。これは、アニメーションが要素に適用された直後に再生を開始することを意味します。正の時間値は、アニメーションの開始 (アニメーション プロパティを介してアニメーションが要素に適用されるとき) と実行の開始の間の遅延を定義するオフセットを表します。

アニメーション遅延に負の値を指定することもできます。 「0」などの負の値は、アニメーションが適用されるとすぐに実行されますが、アニメーションが過去に指定された時間に開始されたかのように、遅延の絶対値によって自動的に進められることを意味します。サイクルは途中から始まります。たとえば、アニメーション遅延に「-2S」の値を指定すると、アニメーションは適用されるとすぐに開始されますが、適用される 2 秒前に開始されたように見えます。

5.animation-iteration-count 属性

animation-iteration-count 属性: 前に再生するアニメーション ループの数を指定するために使用されます。停止中、つまり再生回数です。

初期値は「1」で、アニメーションが最初から最後まで 1 回再生されることを意味します。通常は値「infinite」が取られ、無限ループで再生されることを意味します。

6、アニメーション方向属性

アニメーション方向属性: アニメーションを一部またはすべてのループまたは反復に含めるかどうかを指定するために使用されます。逆再生、つまり再生方向。

この属性で可能な値:

normal: 通常の方向

reverse: アニメーションは逆方向に実行され、方向は常に通常と同様になります

alternate: アニメーション 交互に順方向と逆方向のモーションを繰り返します

7、animation-fill-mode 属性

animation-fill-mode 属性再生後のアニメーションの状態を定義します。より具体的には、アニメーションの遅延中およびアニメーションの実行終了後に要素に適用されるスタイルを定義します。

この属性の可能な値:

none: デフォルト値、スタイルは設定されていません

forwards: アニメーション終了後も終了状態を維持します

backwards: 終了後、アニメーション開始時の状態に戻ります。

Both: 終了後、前進と後退の 2 つのルールに従うことができます

8 、animation-play-state 属性

animation-play-state 属性: オブジェクト アニメーションの状態を取得または設定するために使用されます。つまり、CSS アニメーションが実行中か一時停止中かを指定します。 。

この属性の可能な値:

running: デフォルト値、モーション;

paused: 一時停止。

アニメーションの 略語属性 animeattribute を使用して、アニメーションのスタイルを一度に設定することもできます:

/ *一个动画定义的语法* / 
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
/ *两个动画定义，用逗号隔开* / 
animation：animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],           
                      [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

css3 アニメーション属性と @キーフレーム ルール 簡単なアニメーションの作成:

コード例:

HTML コード:

<div class="container">
  <p class="text">
    php 中文网
  </p>
</div>

css コード:

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Gentium Basic', serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.text {
  font-size: 3em;
  font-weight: bold;
  color: #009966;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: fall 4s infinite;
  animation: fall 4s infinite;
}

@-webkit-keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%, 60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%, to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

ランニング効果:

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。