transition と display: none でフェードインアニメーション

目次

transition と display: none だけじゃフェードインにならない

いきなりタイトルと矛盾しますが、 transition と display: none; だけではアニメーションになりません。
パッと現れたり消えたりになるだけです。

transition ではなく animation を使用します。
そして display: none だけでなく opacity: 0 も設定します。

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

説明

.fade-in: hover .box

上の□にカーソルを合わせた時、子の .box に付与される CSS

  • display: block; = display: none; で非表示にしていた .box を表示する
  • animation: show 0.5s forwards; = @keyframes で設定している「show」というアニメーションを「0.5秒」かけて呼び出す。呼び出した後は変化したまま残すために「forwards」も記載する
  • @keyframes show = 「show」という名前の to{ } の状態から from{ } の状態に変化させるアニメーションを設定する

.miss-fade-in: hover .box

上手くいかない原因は下記の通り

  • display: none から display: block は数値が変化していくわけではないので transition が効かない
  • display: none で表示されるのと opacity が処理されるタイミングが同時になり opacity がうまく処理されない
css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。

目次