数行いれるだけでいい感じになる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;
}

おすすめ書籍

  • このエントリーをはてなブックマークに追加