Javascript を使用せずに、ページの読み込み時に CSS3 遷移アニメーションを使用することは可能ですか?
これは私が望んでいるようなものですが、ページが読み込まれると次のようになります。
これまでに発見したこと
- CSS3 transition-delay は、要素への効果を遅らせる方法です。ホバー時にのみ機能します。
- CSS3 キーフレームはロード時に動作しますが、非常に遅いです。そのため、役に立ちません。
- CSS3 の遷移は十分に高速ですが、ページの読み込み時にアニメーション化されません。
ベストアンサー1
JavaScript を使用せずにページの読み込み時にCSSアニメーションを実行できます。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 */
コンテンツをスライドインしたり、特定の領域に注目させたりなど、さまざまな興味深いことを行うことができます。