数行いれるだけでいい感じになるCSSアニメーションのテクニック
FVの表示を滑らかにする
CSSアニメーションを使います。
@keyframes show{
from{
opacity: 0.4;
}
to{
opacity: 1;
}
}
.hero{
animation: show 0.4s ease-out;
}
FV画像の表示が滑らかになるので、通常の端的な表示よりリッチな印象に見えます。
何度もページが表示されることが想定されるので、少ない秒数で表示するのがポイント。
さらに、初期のopacity
は0
ではなく、0.4
にすることでチカチカした表示になりません。
ページの表示を滑らかにする
FV画像同様に、CSSアニメーションを使います。
@keyframes show{
from{
opacity: 0.4;
}
to{
opacity: 1;
}
}
#wrapper{
animation: show 0.4s ease-out;
}