CSS3 animation transition: opacity not working
You can just use visibility
without using display
:
.top-nav li ul.drop-down {
list-style-type: none;
position: absolute;
top: 32px;
left: -40px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
}
Demo.
You can use css animation when you want to increase opacity and make the element visible, like --
span {
display: none;
opacity: 0;
}
To make span
visible
span {
display: block;
animation: visible 2s;
}
@keyframes visible {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
And if you're getting a bug when make animation less than 1s then use animation: visible 0.5s forwards;