メインビジュアルに合うフェードインアニメーションをCSSで実装する
フェードインアニメーションをCSSのみで実装する方法です。アニメーションを発火させるタイミングの調整ができないので、ヘッダーやメインビジュアルといったファーストビューに使える方法になります。
See the Pen
Fade-in Animation by Kobayashi (@Pulp_Kobayashi)
on CodePen.
h1 {
position: absolute;
top: 30px;
animation: 0.4s fadeinlogo 0.9s forwards;
opacity: 0;
}
@keyframes fadeinlogo {
0% {
left: 20px;
}
100% {
left: 30px;
opacity: 1;
}
}button {
position: absolute;
right: 30px;
animation: 0.4s fadeinbtn 1.6s forwards;
opacity: 0;
}
@keyframes fadeinbtn {
0% {
top: 20px;
}
100% {
top: 30px;
opacity: 1;
}
}p {
position: absolute;
right: 100px;
animation: 0.3s fadeintxt 2.3s linear forwards;
opacity: 0;
}
@keyframes fadeintxt {
0% {
bottom: 20px;
}
100% {
bottom: 30px;
opacity: 1;
}
}デモでは3つの要素をフェードインさせています。
どれも10px移動しながら透明度を0→1にアニメーションさせています。
animationをショートハンドで記述してありますが、これを分解したのが以下です。
h1 {
animation-duration: 0.4s;
animation-name: fadeinlogo;
animation-delay: 0.9s;
animation-fill-mode: forwards;
}- animation-duration
- アニメーションが完了するまでの時間。
0.4sは0.4秒をかけてアニメーションさせます。
- animation-name
- @keyframesで定義したキーフレームを指定。
@keyframes規則名とanimation-nameを同じfadeinlogoにすることで@keyframesで指定したアニメーションの中間ステップを適用させます。
- animation-delay
- アニメーションの開始タイミングの指定。
0.9sで0.9秒後にアニメーションを開始させます。
- animation-fill-mode
- アニメーション前後のスタイルをどのように適用するかを設定。
forwardsでアニメーション後も@keyframesの100%で指定したスタイルを保持します。
