动画 CSS3:显示 + 不透明度 [英] Animation CSS3: display + opacity

问题描述

我的 CSS3 动画有问题.

I have got a problem with a CSS3 animation.

.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 的更改后才有效.

This code only works if I remove the change of display.

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

I want to change the display just after the hover but the opacity should be changed using the transition.

推荐答案

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

I changed a bit but the result is beautiful.

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

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

谢谢大家.

这篇关于动画 CSS3:显示 + 不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！