动画CSS3:显示+不透明度 [英] Animation CSS3: display + opacity
本文介绍了动画CSS3:显示+不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个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;
}
此代码仅在我删除显示更改时有效。
$
This code only works if I remove the change of display.
I want change the display just after the hover but the opacity change with 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屋!
查看全文