CSS3での@keyframesアニメーションの実装

この記事は主に CSS3 @keyframes の簡単なアニメーション実装に関する関連情報を紹介しています。非常に優れた内容なので、参考として共有します。

CSS3 @keyframes のシンプルなアニメーションの実装

定義:

アニメーションは @keyframes ルールを通じて作成できます。

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

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

変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。

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

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

重要: 互換性の問題! @keyfrmes IE 9 以前のブラウザとは互換性がありません。

構文:

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//多个特性变化，用;隔开.

@-webkit-keyframes mymove{

0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

mymoveアニメーションメソッドを使用する:

animationname	必須。アニメーションの名前を定義します。
キーフレームセレクター	必須。アニメーションの継続時間の割合。 有効な値: 0-100% から(0%と同じ) から(100%と同じ) 必須。 1 つ以上の有効な CSS スタイル プロパティ。

selector

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示无限次循环，也可设置次数n：
                                           animation-interation-count:n*/ 
}

概要: @keyframesはアニメーションと密接に関係しており、徹底的にマスターしたい場合はアニメーションと一緒に学ぶ必要があります。使用法。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 のメディア クエリの分析

CSS3 を使用して 8 セットの非常にクールなマウスオーバー画像アニメーションを実装する

以上がCSS3での@keyframesアニメーションの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。