CSS の display: none; から opacity のアニメーションを適用する方法
公開日
by
CSS の display: none; から opacity のアニメーションを適用する方法を紹介します。
例えば、DOM の生成タイミングで transition が意図した動きをしてくれない時に便利な方法です。
display: none; から opacity 透過アニメーションの適用方法
display: none; から opacity 透過アニメーションを適用するには animation を利用します。
.example {
display: none;
}
.example.active {
display: block;
animation: fade-in .4s;
}
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
紹介している指定は、クラス example にクラス active が付与された時を想定しています。
実行したいタイミングは任意の指定に変更してご利用ください。
display: none; から transition で opacity がアニメーションしない理由
display: none; から display: block; に切り替わるタイミングでは、指定した opacity: 0; が初期値にならないため、transition を利用したアニメーションはうまく動きません。
そのため、今回紹介した方法では display: block; に切り替わったタイミングで animation の初期値に opacity: 0; を指定。アニメーション終了後に opacity: 1; を指定することで、透過アニメーションを再現することが可能になります。
まとめ
CSS の display: none; から opacity のアニメーションを適用する方法を紹介しました。
