0Pricing
CSS Academy · レッスン

@keyframesの構文とanimationプロパティ

@keyframesでアニメーションの各ステップを定義し、animationショートハンドで適用します。

「@keyframesの構文とanimationプロパティ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSSアニメーションとは

CSSアニメーションでは、@keyframesを使って時間の経過に伴う複数段階のプロパティ変更を定義できます。トランジションとは異なり、アニメーションは自動的に、またはクラスの追加時に開始でき、複雑なシーケンスにも対応します。

@keyframesの構文

パーセンテージ（0%から100%）またはfrom／toキーワードを使って、アニメーションの各段階を定義します。

<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>

animationプロパティ

animationのショートハンドまたは個別のサブプロパティを使って、要素にアニメーションを適用します。

<h1 class="hero-text">Welcome!</h1>

animation-name

名前で@keyframesルールを参照します。

<div class="spinner"></div>

animation-duration

アニメーションの1サイクルにかかる時間を設定します。

<div class="pulse"></div>

複数段階のアニメーション

複雑な複数段階のアニメーションには、パーセンテージでキーフレームを指定します。

<div class="slide-demo">Sliding in</div>

複数のプロパティをアニメーションさせる

各キーフレームの段階では、複数のプロパティを同時にアニメーションさせることができます。

<div class="bounce-demo"></div>

キーフレームごとのanimation-timing-function

タイミング関数はキーフレームの各段階に設定できます。これにより、アニメーション全体ではなく、個々の経由点の間でイージングを制御できます。

複数のアニメーション

カンマ区切りの値を使って、1つの要素に複数のアニメーションを適用します。

<div class="element">Two animations combined</div>

animation-play-state

アニメーションを動的に一時停止・再開します。

<div class="card">Hover the card to pause<div class="spinner"></div></div>

CSSアニメーションとトランジションのまとめ

目的に応じて使い分けてください。

  • Transition：2つの状態を扱い、状態の変化をきっかけに実行するシンプルな処理
  • Animation：複数段階で、自動的に開始でき、ループやより細かな制御に対応する処理

クイックチェック

アニメーションの開始状態を表す@keyframesのキーワードはどれですか。

振り返り

@keyframesでは、from/toまたはパーセンテージの経由点を使ってアニメーションの各段階を定義します。animationのショートハンドで、名前、継続時間、タイミング、フィルモードを指定して適用します。複数のアニメーションはカンマで区切ります。単純な2状態の変化にはトランジションを、複雑なシーケンスにはアニメーションを使ってください。

よくある質問

「@keyframesの構文とanimationプロパティ」レッスンは無料ですか？

はい。「@keyframesの構文とanimationプロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「@keyframesの構文とanimationプロパティ」で何を学びますか？

@keyframesでアニメーションの各ステップを定義し、animationショートハンドで適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「@keyframesの構文とanimationプロパティ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. @keyframesの構文とanimationプロパティ
  2. アニメーションの方向・フィルモード・反復
  3. アニメーションの連結とシーケンス化
  4. prefers-reduced-motionに対応したアクセシブルなアニメーション
← CSS Academyに戻る