数行いれるだけでいい感じになるCSSアニメーションのテクニック

FVの表示を滑らかにする

CSSアニメーションを使います。

@keyframes show{
    from{
        opacity: 0.4;
    }
    to{
        opacity: 1;
    }
}

.hero{
    animation: show 0.4s ease-out;
}

FV画像の表示が滑らかになるので、通常の端的な表示よりリッチな印象に見えます。

何度もページが表示されることが想定されるので、少ない秒数で表示するのがポイント。
さらに、初期のopacity0ではなく、0.4にすることでチカチカした表示になりません。

ページの表示を滑らかにする

FV画像同様に、CSSアニメーションを使います。

@keyframes show{
    from{
        opacity: 0.4;
    }
    to{
        opacity: 1;
    }
}

#wrapper{
    animation: show 0.4s ease-out;
}
  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note