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;}
}

関連する推奨事項:

jQuery を使用してアニメーション化された使用例を作成する_jquery

キーフレームに関する 10 のおすすめ記事

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