ページ読み込み時にふわっと浮き上がるCSSアニメーション

2020年12月30日2021年5月16日

本記事では、ページの読み込み時に、下からふわっとフェードインするアニメーションをCSSだけで実装する方法を紹介します。

※このページだけフェードインアニメーションをつけているので、完成イメージが見たい方はページをリロードしてみてください。

ページ読み込み時にフェードインするアニメーションをCSSでつける方法

ページ読み込み時にフェードインするアニメーションは、CSSのanimationプロパティでつけることが出来ます。

実装方法も簡単！

以下のコードを、WordPressの子テーマにコピペするだけです。

/* 読み込み時フェードイン */
.container {
    animation: fadein 1.5s ease 0s 1 normal;
    -webkit-animation: fadein 1.5s ease 0s 1 normal;
}
@keyframes fadein {
    from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@-webkit-keyframes fadein {
    from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

以上！

CSSでふわっと浮き上がるフェードインアニメーションを実装する方法でした！

WordPressテーマのSANGO風の雰囲気が出ます。