动画CSS3：显示+不透明度

Question

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。

我想在悬停后立即更改显示，但不透明度应使用过渡进行更改。

Answer 1

我改变了一点，但结果很漂亮。

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

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

谢谢大家