ホームページ > 記事 > ウェブフロントエンド > CSS3での@keyframesアニメーションの実装

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

不言オリジナル: 2018-06-26 11:52:282362ブラウズ

この記事は主に 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%と同じ)

selector

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

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

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

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

関連記事