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 テクノロジーを使用した以前の手動実装を完全に置き換えることができます。

【関連おすすめ】

1. 無料のCSSオンラインビデオチュートリアル

2. CSSオンラインマニュアル

3. php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSS キーフレーム アニメーションのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。