【CSSアニメーション】コピペでOK！フェードインでふわっと表示する方法

ふわっと下から現れるように表示されるコンテンツを見たことがあると思いますが、あれ実はcssで簡単に実現できるんです！

WordPressでも見た目やレイアウトにこだわっていくと一度は「ふわっと表示」に憧れることあると思います。

今日は驚くほど簡単に見栄えが良くなる「ふわっと表示」をコピペのみで実現してみましょう。

とりとん

早速コードを確認してみよう！

コード

.class名{
    animation-name: fadein;
    animation-duration: 3s;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(20px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}

1行目のclass名の部分は対象のclass名に置き換えてお使い下さい。

animation-durationで表示されるまでの時間を指定することができます。

ちなみに「3s」は3秒です！

opacity: 0;→opacity: 1;は透明(0)から表示(1)させているので値は変えなくてOK。

transform: translatey(20px);→transform: translatey(0);は動かす距離を指定することができます。

この“y“は縦軸を表しているので、縦に20px動きます。

ちなみに横軸は“x”になります。

WordPressでの実装方法

WordPressのカスタマイズ方法として、既存のHTMLにCSSを追加・修正する手順を書いてみました！

CSSやclassについての簡単な説明から便利なデベロッパーツールの使い方など・・

初心者向けに書いたのでよかったら参考にしてみて下さい⬇️

【CSS】知識ゼロでもわかる！WordPressでCSSを追加・修正する方法

とりとん CSSって何？ CSSは簡単にいうと、webページのレイアウトや色などスタイルのことだよ！ HTMLで組んでいる要素にCSSを付けることでいろんなスタ...

toriton.link

ふわっと動くだけでワンランク上のかっこよさになるね！

簡単なのでぜひやってみてください〜

とりとん

最後まで読んでいただきありがとうございました！

＼ ぽちっと応援お願いします♪ ／