質問

Javascriptを使用せずに、ページロード時にCSS3のトランジションアニメーションを使用することは可能でしょうか？

これは私が欲しいもののようなものですが、ページロード時です。

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

これまでに発見したこと

• CSS3 transition-delay 要素の効果を遅らせる方法です。ホバー時のみ動作します。
• CSS3キーフレーム ロード時に動作しますが、非常に遅いです。そのため使い物にならない。
• CSS3トランジション は十分に高速ですが、ページロード時にアニメーションしないようにします。

解決方法は？

あなたは 可能 を実行します。 CSS JavaScript を使用せずに、ページロード時にアニメーションが表示されます。 CSS3 キーフレーム .

例を見てみましょう。

ナビゲーションメニューがスライドして表示されるデモをご紹介します。 CSS3 だけです。

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

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ 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>

分解してみる...

ここで重要なのは、キーフレーム・アニメーションと呼ばれるものです。 slideInFromLeft ...

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

...これは基本的に、"開始時にヘッダーは画面の左端から幅いっぱいにはみ出し、終了時には所定の位置になる"という意味です。

2つ目の部分は、その slideInFromLeft アニメーションを作成します。

animation: 1s ease-out 0s 1 slideInFromLeft;

上記は短縮版ですが、以下は分かりやすくするための冗長版です。

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

コンテンツをスライドさせたり、ある部分に注目させたりと、いろいろと面白いことができます。

W3Cの見解はこちらです。