作ったサイトにページ遷移アニメーションを追加しよう！
ページ遷移のアニメーションをちょっと追加するだけでサイトがリッチになります。チャレンジしてみましょう！
今回はCSSのみで実装してみます。
htmlはbodyにclassをつけるだけです。今回は「.bg-animation」という名前でCSSを作成しています。
サンプルファイルがありますので、こちらに遷移アニメーションを追加してみましょう。
HTML
<body class="bg-animation">
上記はサイトのすべてのページに追加する必要があります。
CSS
.bg-animation::before {
content: "";
animation-name: pageAnime;
background: #ccff00;
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100vh;
animation-duration: 1s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
pointer-events: none;
}
@keyframes pageAnime {
0% {
transform-origin: top;
transform: scaleY(0);
}
30% {
transform-origin: top;
transform: scaleY(1);
}
70% {
transform-origin: bottom;
transform: scaleY(1);
}
100% {
transform-origin: bottom;
transform: scaleY(0);
}
}
これで動作するはずです。
アニメーションさせる要素を画面の前面に表示させ、動かすことでページを読み込むたびに表示を行っています。
