CSS3 学習アニメーション property_html/css_WEB-ITnose

アニメーションの新しい属性がとても興味深いと思いました。ここで学び、整理してみます!

ブラウザのサポート :

Internet Explorer 10、Firefox、Opera はアニメーション プロパティをサポートします。

Safari と Chrome は代替の -webkit-animation プロパティをサポートします。

定義と使用法

アニメーション プロパティは、次の 6 つのアニメーション プロパティを設定するための短縮プロパティです:

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration- count

animation-direction

構文

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

値の説明

animation-name	セレクターにバインドする必要があるキーフレーム名を指定します。 。 animation-name: keyframename|none;
animation-duration	アニメーションの完了にかかる時間を秒またはミリ秒で指定します。 animation-duration: time;
animation-timing-function	アニメーションのスピードカーブを指定します。 animation-timing-function: value;
animation-delay	アニメーションが開始されるまでの遅延を指定します。 animation-delay: time;
animation-iteration-count	アニメーションを再生する回数を指定します。 animation-iteration-count: n|infinite（无限次）;
animation-direction	アニメーションを順番に逆再生するかどうかを指定します。うーん

その中で

animation-timing-function は Cubic Bezier) 関数という関数を使用します速度曲線を生成します。この関数では独自の値、または事前定義された値を使用できます:

値の説明

linear

アニメーションの速度は最初から最後まで同じです。

簡単

デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。

イーズイン

アニメーションは低速で始まります。

ease-out

アニメーションは低速で終了します。

イーズインアウトcubic-bezier(n,n,n,n)#auto {アニメーション: 無限 dd 1s 無限;}

アニメーションは低速で開始および終了します。
cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。
ケース:	非常に実用的で、矢印がループ状に上下にジャンプします
-webkit-animation:dd 1s;

@keyframes dd{

0% {transform:translate(0, 10px)}

50% {transform:translate(0, 0)}

100% {transform:translate( 0, 10px )}

}

@-webkit-keyframes dd{

0% {-webkit-transform:translate(0, 10px)}

50% {-webkit-transform:translate(0, 0)}

100% {-webkit -transform:translate(0, 10px)}

}

注: アニメーション属性の使用は @keyframes と組み合わせて使用​​する必要があります

継続時間が設定されていない場合、パーセントは継続時間の割合を意味します。無限大として表現されます。

transform:translate(): 意味 -- 変更、置換。CSS3 の新しい属性でもあります。