フェードイン
↓HTML
<div class="fadeIn">
<p>フェードイン</p>
</div>
↓CSS
.fadeIn {
animation-name: fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeInAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
説明
このコードは、ウェブページの一部がゆっくりと見えるようにするためのもので
これを「フェードイン」と言い、アニメーションと呼ばれる。
fadeIn
このアニメーションを適用したいウェブページの部分につける名前(クラス名)です。animation-name: fadeInAnime;
これから作成するアニメーションの名前を指定します。この場合、名前はfadeInAnime
です。animation-duration: 5s;
アニメーションが何秒間で起こるかを設定します。この場合、アニメーションは5秒間で行われます。animation-fill-mode: forwards;
アニメーションが終わった後でも、終了時の状態を保持するように指定します。opacity: 0;
始まりの透明度を設定します。0は完全に透明、つまり見えない状態を意味します。opacity: 1;
終わりの透明度を設定します。1は不透明、つまり見える状態を意味します。
次に、@keyframes fadeInAnime {...}
の部分は、実際のアニメーションの動きを指定します。
0% {
opacity: 0;
}
アニメーションの開始時点で、要素が完全に透明(見えない)状態であることを指定します。100% {
opacity: 1;
}
アニメーションが完全に終わると、要素が完全に不透明(見える)状態であることを指定します。
結果として、このコードが適用された部分は5秒間でゆっくりと見えるようになります。
最初は透明で見えませんが、時間とともに少しずつ見えるようになり、5秒後には完全に見えます。
コメント