display: noneからdisplay: blockに変更時のアニメーション

CSSのtransitionは、特定のプロパティの変更を時間的に遅らせることでアニメーション効果を持たせることができます。しかし、displayプロパティの変更（例えば、display: noneからdisplay: blockへの変更）は、transitionによるアニメーションの対象外です。これはdisplayプロパティがレンダリングに直接関わるため、即時に適用されるからです。

そのため、displayプロパティの変更にアニメーションを付けたい場合、animationプロパティを使用する方法が考えられます。

方法:

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

element {
    animation: fadeIn 1s forwards;
}

上記のコードでは、fadeInというアニメーションを定義して、対象となるelementに1秒間でフェードインするアニメーションを適用しています。このように、display: blockに変更された直後にopacityを使用してアニメーションを付けることで、表示変更に伴うアニメーション効果を再現することができます。

この方法を採用することで、displayプロパティの変更にも滑らかなアニメーションを持たせることができ、ユーザー体験を向上させることが期待できます。