CODEWITHSUNDEEP
htmlgoogle-chromecss-transitions
redbmk
redbmk

Reputation: 4796

Bi-Directional CSS Transitions

I'm using vendor prefixed css transitions, based on this demo, which seems to only be working in Chrome 22+ at the moment. I'm trying to turn the buttons (Home, Contact, About) into drop-down menus on hover. I want to avoid using javascript and see if I can do it all with CSS.

It fades in if I have the z-index set to a low number (-999) and on hover change it to a high number (999), and change the opacity from 0 to 1 using a transition.

nav > div div {
    z-index: -999;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
}
nav > div:hover div {
    z-index: 999;
    opacity: 1;
}

See the Fiddle here.

The problem is it won't fade back out. If I change the transition to also delay the z-index from changing then it will fade out, but not in (-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s). Modifications to the Fiddle here.

Essentially what's going on is the opacity fading works fine, but z-index moves too quickly in either one direction or the other. If I don't use z-index at all, then it will open the menu when I'm hovering below the "Hover Me" button instead of on it. Here's another Fiddle showing that scenario.

Is there a way to have one transition for going from point A to point B, and another transition for going from point B to point A? I've played around with putting a separate transition on the :hover element but as far as I can tell it just overrides the first one (as if there is no transition from "not hovering" to "hovering").

TL;DR: Is there a way to modify this, this, or this to make a smooth transition when hovering on (not just near) the "Hover Me" button (without using javascript)?

Upvotes: 0

Views: 2024

Answers (1)

Split Your Infinity
Split Your Infinity

Reputation: 4229

Check out this Fiddle. Not sure if it does what you want, but I changed the following...

CSS

nav > div > div {
  z-index: -999;
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -moz-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -ms-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -o-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
}
nav > div:hover > div {
  z-index: 999;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -moz-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -ms-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -o-transition: opacity 1s ease-in-out, z-index 0 linear 0;
}

I've added transitions to the hover state as well, but with a delay of 0.

Upvotes: 1

Related Questions