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