[解決済み] アニメーション CSS3: 表示 + 不透明度

質問

CSS3アニメーションで問題が発生しました。

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

の変更を削除した場合のみ、このコードは機能します。 display .

ホバー直後の表示を変更したいが、不透明度はトランジションを使って変更する必要がある。

どのように解決するのですか？

少し変更しましたが、結果は美しいです。

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

皆さん、ありがとうございました。