Animation CSS3: display + opacity
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 to change the display just after the hover but the opacity should be changed using the transition.
Solution 1:
Based on Michaels answer this is the actual CSS code to use
.parent:hover .child
{
display: block;
-webkit-animation: fadeInFromNone 0.5s ease-out;
-moz-animation: fadeInFromNone 0.5s ease-out;
-o-animation: fadeInFromNone 0.5s ease-out;
animation: fadeInFromNone 0.5s ease-out;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
Solution 2:
If possible - use visibility
instead of display
For instance:
.child {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.parent:hover .child {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0.3s;
}
Solution 3:
You can do with CSS animations:
0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;