CSS3 学習アニメーション property_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:47:17

オリジナル

1296 人が閲覧しました

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

ブラウザのサポート :

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

値の説明

linear

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

簡単

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

イーズイン

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

ease-out

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

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	アニメーションを順番に逆再生するかどうかを指定します。うーん

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

アニメーションは低速で開始および終了します。
cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。


ケース:	非常に実用的で、矢印がループ状に上下にジャンプします
-webkit-animation:dd 1s;