ホームページ > 記事 > ウェブフロントエンド > CSS キーフレーム アニメーションのサンプル チュートリアル
CSSアニメーションでは、トランジションテクノロジーの使用は「暗黙的」アニメーション方法であり、それに対応して「明示的」アニメーションテクノロジーがあります。つまり、CSSでアニメーション効果を直接指定できます。これには、キーを使用する必要があります。フレーム属性。
デモ: 紅葉の落ちるアニメーション
上記の「紅葉の落ちるアニメーション」の CSS アニメーションのデモは、CSS アニメーションの優れた特性を十分に示しており、非常にエキサイティングなはずです。
それでは、バウンシングボックスから始めて、キーフレームアニメーションを作成する方法を段階的に紹介しましょう。
デモ: バウンスボックス
このようなアニメーション効果を CSS で宣言するのは非常に簡単です。まず、@keyframes を使用してアニメーション効果のルールを記述します。
@keyframes bounce { from { left: 0px; } to { left: 200px; } }
@keyframes コード ブロックには、総称してキーフレームと呼ばれる一連の CSS ルールがあります。 キーフレームは、完全なアニメーションの特定の瞬間のアニメーション スタイルを定義します。アニメーション描画エンジンにより、様々なスタイル間のスムーズな移行を実現します。 「バウンス」として定義された上記のアニメーションには 2 つのキーフレームがあります。1 つはアニメーションの開始 状態 (「from」コード ブロック) と終了状態 (「to」コード ブロック) です。
アニメーションを定義したら、animation-name を使用してそれをアニメーション ターゲット要素に関連付けることができます。
p { animation-name: bounce; animation-duration: 4s; animation-iteration-count: 10; animation-direction: alternate; }
「バウンス」アニメーションは上記のCSSルールにバインドされており、アニメーション期間も4秒に設定されており、合計10回実行され、間隔を置いて逆方向に実行されます。
次に、回転、背景色、透明度、その他のテクノロジーを含む、複数のキーフレームの使用が必要な、より複雑なアニメーションを作成します。
@keyframes pulse { 0% { background-color: red; opacity: 1.0; transform: scale(1.0) rotate(0deg); } 33% { background-color: blue; opacity: 0.75; transform: scale(1.1) rotate(-5deg); } 67% { background-color: green; opacity: 0.5; transform: scale(1.1) rotate(5deg); } 100% { background-color: red; opacity: 1.0; transform: scale(1.0) rotate(0deg); } } .pulsedbox { animation-name: pulse; animation-duration: 4s; animation-direction: alternate; animation-timing-function: ease-in-out; }
ここのキーフレームは、アニメーションの各段階でのアクション シーンをパーセンテージで表しています。前述の「from」キーワードと「to」キーワードは、実際には「0%」と「100%」に相当します。
CSS キーフレーム アニメーションの目的は、WEB 開発者にカラフルなページ効果を作成する簡単な方法を提供することです。ほとんどのアニメーション効果は本質的に表現力豊かであるため、ブラウザ スタイル システムに属します。プログラマは、スタイルを宣言するだけでこれらのエフェクト アニメーションを作成でき、JavaScript テクノロジーを使用した以前の手動実装を完全に置き換えることができます。
【関連おすすめ】
3. php.cn Dugu Jiijian (2) - CSSビデオチュートリアル
以上がCSS キーフレーム アニメーションのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。