@starting-style による入力アニメーションの簡素化-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

@starting-style による入力アニメーションの簡素化

Susan Sarandon

Jan 12, 2025 pm 06:20 PM

Simplifying Entry Animations with @starting-style

スムーズな入力アニメーションを作成するのは難しい場合があります。 DOM の読み込み時間と display: none からのアニメーションの複雑さにより、イライラする結果が生じることがよくあります。 @starting-style ルールは、要素が最初に表示されるときに CSS プロパティの初期値を明示的に定義できるようにすることで、合理化されたソリューションを提供し、最初からシームレスな遷移を保証します。

その他の例を含む記事全文はこちらでご覧いただけます。

基本を理解する

@starting-style は、要素が表示される前の CSS プロパティの初期状態、つまり「前の」状態を設定します。「後」の状態は、標準の CSS ルールで定義されます。仕組みは次のとおりです:

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

初期ロード時に、@starting-style は要素の不透明度を 0 に設定します。その後、最終状態 (この場合は不透明度: 1) にスムーズに移行します。この機能は、要素が display: none から表示状態に遷移するときにも適用されるため、切り替えられた要素をアニメーション化するのに最適です。

`@starting-style`

の利用

@starting-style は 2 つの方法で適用できます。要素のルールセット内でネストする (セレクターは不要) か、セレクターを使用して個別に定義します。

重要な注意: 疑似要素 (@starting-style や ::before など) 内で ::after をネストすると、意図したとおりに機能しません。スタイルは、擬似要素ではなく、親要素に影響します。

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

重要な考慮事項: @starting-style と「元のルール」の特異性は同等です。信頼性の高い適用を行うには、常に @starting-style の at-rule を「元のルール」 の後に 配置します。

実際の応用

@starting-style は、エントリーエフェクトとトランジションの作成に優れています。ページ読み込み時のテキストのフェードインや、ポップアップやダイアログのアニメーション化に使用することを検討してください。以下にいくつかの例を示します:

`display: none`

からのアニメーション

@starting-style の主な利点は、最初は非表示の要素、特に display: none から移行する要素に対してスムーズな遷移を作成できることです。 @starting-style がないと、開始状態が定義されていないため、この遷移をアニメーション化するのは困難です。 @starting-style は、初期状態を提供することでこれを解決します。

dialog 要素は明確な図を提供します。その体はdisplay: noneとdisplay: blockの間で切り替わります。 display プロパティの変更により、これをアニメーション化することは通常は不可能ですが、@starting-style を使用すると実現可能になります。