ホームページ > 記事 > ウェブフロントエンド > CSS3 は @keyframes を通じてアニメーションを作成します

CSS3 は @keyframes を通じてアニメーションを作成します

小云云オリジナル: 2018-02-26 09:37:512023ブラウズ

この記事では、CSS3 @keyframes の簡単なアニメーション実装に関する情報を中心に紹介します。編集者が非常に優れていると感じたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

定義:

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

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

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

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

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

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

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

構文:

アニメーション名

必須。アニメーションの名前を定義します。キーフレームセレクター必須。アニメーションの継続時間の割合。

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

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

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

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

有効な値:

0-100%

から(0%と同じ)
から(100%と同じ)
必須。 1 つ以上の有効な CSS スタイルプロパティ。

Selector

CSS3 は @keyframes を通じてアニメーションを作成します

関連記事