CODEWITHSUNDEEP
htmlcsstransitionopacity
cremaster
cremaster

Reputation: 50

Why isn't my opacity transition time (CSS) working? Everything else in the CSS block works?

I have a navigation menu set up so the submenu appears on hover (by changing the opacity). You can view the site here.

The issue I'm having, is I want a slow fade in (1.4 seconds) but the fade in broke and the submenu now appears instantly, which is jarring.

The relevant code is below or you can view the GitHub repo here. Thanks so much for your help and let me know if you need any more information!

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: none;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}
<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>

Upvotes: 0

Views: 72

Answers (3)

Rachel Gallen
Rachel Gallen

Reputation: 28553

Using the ease-in transition-timing will make the opacity transition slower, but you will have to remove the display:none from the dropdown-content css in order for it to work. Just a note: I changed your ampersands from & to &amp; (the html ampersand)

Hope this helps

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
-webkit-transition: opacity 1.4s ease-in;
transition: opacity 1.4s ease-in;
}
<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin &amp; Johanna</a>
        <a href="#">Jenn &amp; Matt</a>
        <a href="#">Taylor &amp; Craig</a>
        <a href="#">Greg &amp; Jocelyn</a>
    </div>
</div>

Upvotes: 1

khalid J-A
khalid J-A

Reputation: 614

delete display property in the two cases 

  .dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;

}

.dropdown:hover .dropdown-content {
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s;
}

Upvotes: 2

Johannes
Johannes

Reputation: 67738

The reason is your display parameter. If you set it to block for both states (or erase it from both rules, leaving them at the default setting), the opacity animation will work:

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}
<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>

Upvotes: 2

Related Questions