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

<!DOCTYPE html><html><head><style>    @keyframes myfirst {        from {background:red;}        to {background:yellow;}    }    /* Firefox */    @-moz-keyframes myfirst {        from {background:red;}        to {background:yellow;}    }    /* Safari and Chrome */    @-webkit-keyframes myfirst {        from {background:red;}        to {background:yellow;}    }    /* Opera */    @-o-keyframes myfirst {        from {background:red;}        to {background:yellow;}    }    div {        width:100px;        height:100px;        margin: 50px auto;        background:red;        animation:myfirst 5s;        -moz-animation:myfirst 5s; /* Firefox */        -webkit-animation:myfirst 5s; /* Safari and Chrome */        -o-animation:myfirst 5s; /* Opera */    }</style></head><body><div></div></body></html>

ログイン後にコピー

とてもシンプルでカッコイイと思いませんか？

CSS3 アニメーションを実装するには、少なくとも次の条件が必要です:

@keyframes を使用してアニメーションを作成し、名前を付けます
アニメーションの短縮形属性またはその他の特定の属性を使用してアニメーションを呼び出し、アニメーションの継続時間を設定します
アニメーションをバインドするto 特定のセレクター上

以下に、関連する各属性を詳しく紹介します。

アニメーション @keyframes を作成する

@keyframes ルールを使用して、アニメーションを作成できます。

アニメーション作成の原則は、ある CSS スタイルのセットを別のスタイルのセットに徐々に変更することです。

この CSS スタイルのセットは、アニメーションプロセス中に複数回変更できます。

変化が発生する時間をパーセントで指定するか、キーワード from と to を使用して変化が発生する時間を指定します。

0% はアニメーションの開始時間、100% はアニメーションの終了時間です。

ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。

@keyframes myfirst {    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}/* Firefox */@-moz-keyframes myfirst {    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}/* Safari 和 Chrome */@-webkit-keyframes myfirst {    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}/* Opera */@-o-keyframes myfirst {    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}

ログイン後にコピー

アニメーションを呼び出しますアニメーション

上では @keyframes を使用してアニメーションを作成し、次にアニメーションを呼び出します。

前述したように、アニメーションを呼び出す最も基本的なものは、アニメーションの名前とアニメーションに費やされた時間です。以下では、アニメーション呼び出しに関連する属性を詳しく紹介します。

アニメーション名

呼び出すアニメーションを指定します。

animation-name: keyframename | none;

ログイン後にコピー

none はアニメーション効果を指定しません (カスケードからのアニメーションをオーバーライドするために使用できます)。

キーフレーム名の命名は次のルールに従います:

名前には文字、数字、_ または - を使用できます。大文字と小文字が区別されます。文字または単一の - でのみ開始できます。また、なし、未設定、イニシャル、および継承キーワードは使用できません。

animation-duration

animation-duration プロパティは、アニメーションの 1 サイクルが完了するのにかかる時間を秒またはミリ秒で定義します。

animation-duration: 2s; /*等价于 2000ms*/

ログイン後にコピー

animation-timing-function

animation-timing-function はアニメーションのスピードカーブを指定します。

animation-timing-function: value;

ログイン後にコピー

この属性値は、3 次ベジェ関数と呼ばれる数学関数を使用して速度曲線を生成します。

次の値が利用可能です:

Value	Description
linear	アニメーションの速度は最初から最後まで同じです。
簡単	デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。
イーズイン	アニメーションは低速で始まります。
ease-out	アニメーションは低速で終了します。
イーズインアウト	アニメーションは低速で開始および終了します。
cubic-bezier(n, n, n, n)	cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。

5 つの事前定義されたキーワードに対応するベッセル関数は次のとおりです:

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)ease-out: cubic-bezier(0, 0, 0.58, 1.0)ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

ログイン後にコピー

5 つの速度曲線の効果を簡単に体験してください:

速度に対するさまざまな値の影響を個人的に体験したい場合は、ここに移動してくださいここ: ベジェ速度曲線

animation-delay

animation-delay プロパティは、アニメーションがいつ開始されるかを定義します。

animation-delay: time;

ログイン後にコピー

秒またはミリ秒単位の値。負の値は許可されます。-2s を指定すると、アニメーションがすぐに開始されますが、アニメーションが 2 秒スキップされます。

animation-iteration-count

animation-iteration-count 属性は、アニメーションが再生される回数を定義します。

animation-iteration-count: n | infinite;

ログイン後にコピー

n は特定の回数を表し、デフォルトは 1 で、infinite は無制限の再生を指定します。

animation-direction

animation-direction プロパティは、アニメーションを順番に逆方向に再生するかどうかを定義します。

animation-direction: normal | reverse | alternate | alternate-reverse;

ログイン後にコピー

2 つのキーワードはオプションです。normal はアニメーションが通常どおりに再生されることを意味し、デフォルト値は 0% -> 100% で、次に 0% -> 100% は通常の逆です。 ; 0% 次に 100% -> 0% は、0% -> 0%、次に 0% -> の順に再生することを意味します。 . alter-reverse は、 alter の逆です。