4

More than 5 years have passed since last update.

@flatsato(ハルミサトウ)in

株式会社FLAT

【CSSアニメーション】CSSで読み込み時にフェードイン

Last updated at 2018-09-07Posted at 2018-01-26

内容

CSSのみでアニメーションするスニペットです。
CSS記述のみで読み込み時にフェードインします。

コード

body {
    animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

デモ

See the Pen CSS fadein by harumi-sato (@harumi-sato) on CodePen.

参考サイト

CSS だけで Web ページのフェードイン表示を実装する方法 | q-Az
https://q-az.net/fadein-open-only-css/

4

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

4