JavaScript を使用せずにページ読み込み時に CSS3 トランジションをアニメーション化できますか?-CSSチュートリアル-php.cn

JavaScript を使用せずにページ読み込み時に CSS3 トランジションをアニメーション化できますか?

Patricia Arquette

リリース： 2024-12-14 01:34:18

オリジナル

659 人が閲覧しました

Can CSS3 Transitions Animate on Page Load Without JavaScript?

JavaScript を使用せずにページの読み込み時に CSS3 遷移アニメーションを実行できますか?

JavaScript を必要とせずに、ページの読み込み時に CSS3 遷移アニメーションを開始することは実際に可能です。解決策は、CSS3 キーフレームを利用することにあります。

CSS3 キーフレームを使用したスライドアニメーションの実装

CSS3 キーフレームを使用して、ページ上にスライドして表示されるナビゲーションメニューを実現する方法を示します。ロード:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* Invoking the 'slideInFromLeft' animation */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Aesthetic enhancements */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

ログイン後にコピー

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

ログイン後にコピー

ページ上ロードすると、ナビゲーションメニューが左側からスムーズにスライドして表示されます。この効果は CSS3 のみによって実現され、JavaScript の介入は必要ありません。

以上がJavaScript を使用せずにページ読み込み時に CSS3 トランジションをアニメーション化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。