stylesheet

CSSだけでフェードインアニメーション

ページヘッダーをフェードイン登場させたくて、CSSのアニメーションを毎回探すので覚書。

html

<div class="box fadeIn">ふわっ（その場で）</div>

css

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ブックマーク

参考：ふわっと動く

あと今回の要件とは違ったけど、ページ開いたときにロゴをフェードインフェードアウトさせてからコンテンツを表示するときのやり方にも出会いまして（jQueryだけど）またいつかのときのためにブックマークしておく。
jQueryで最初にトップページを開いたときに画面全体やロゴをフェードさせる

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
gifteeを贈る / コーヒーをおごる / mail

1
Outlookを最小化するとタスク バーから消えるのを防ぐ方法

outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になってるんや・・・。 outlookの最小化時の設定を変 ...

2
てがろぐにいいねボタン・改を設置する方法

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3
感想メーカーを作りました

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 素敵なフォロー、フォロワー、創作作家さんに作品の感想を送りたい…！が、語彙力がないという方向けの感想メーカ ...

-stylesheet