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 がうまく処理されない