CSS导航菜单淡出悬停。

Still learning as I go with CSS styling, and I want to implement a fade-in/fade-out navigation menu. Reading up, I was able to code a fade in on hover successfully to the effect that I want. Now I'm being challenged logically and can't seem to come up with how to code that menu to fade out when the mouse no longer hovers over that specific class.

还在学习CSS样式，我想实现一个fade /淡出导航菜单。读到这里，我能够成功地在鼠标悬停上设置渐变效果，达到我想要的效果。现在我正在逻辑上受到挑战，似乎无法想出如何编码那个菜单，当鼠标不再停留在那个特定的类上时，菜单就会消失。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: grey;
}
body {
  position: fixed;
  font-family: Serif, sans-serif;
  background: white;
  font-size: 62.5%;
  color: black;
}
/*Nav Wrapper*/

#navWrapper {
  width: 1100px;
  position: fixed;
  top: 30px;
  left: 0px;
  right: 0px;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
}
/*Banner Wrapper*/

.bannerWrap {
  width: 1100px;
  position: fixed;
  left: 0px;
  right: 0px;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
}
/*Banner Styling*/

.banner {
  border: 1px solid black;
}
/*Main Nav Box Styling*/

.nav {
  position: fixed;
  list-style: none;
  width: 1102px;
  top: 70px;
  margin: 30px auto 0px auto;
  height: 43px;
  padding: 0px 20px 0px 20px;
  background: #323552;
  background: -moz-linear-gradient(top, #323552, #1a1b24);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
  border: 1px solid #002232;
}
/*Main Nav Button Styling*/

.nav li {
  float: left;
  text-align: center;
  position: relative;
  padding: 4px 10px 4px 10px;
  margin-right: 30px;
  margin-top: 7px;
  border: none;
  background-color: transparent;
}
/*Main Nav Button Styling*/

.nav > li > a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #EEEEEE;
  display: block;
  outline: 0;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
  text-transform: uppercase;
  background-color: transparent;
}
/*Drop Down On Hover Action*/

.nav > li:hover > div {
  display: block;
  left: 0;
  -webkit-animation: fadein .5s;
  /* Safari and Chrome */
  -moz-animation: fadein .5s;
  /* Firefox */
  -ms-animation: fadein .5s;
  /* Internet Explorer */
  -o-animation: fadein .5s;
  /* Opera */
  animation: fadein .5s;
}
/*Drop Down Container*/

.nav > li > div {
  position: fixed;
  right: -1px;
  top: 147px;
  height: 300px;
  display: none;
  padding: 10px 10px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
  background: #323552;
  background: -moz-linear-gradient(top, #323552, #1a1b24);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
  overflow: hidden;
}
/*Drop Down*/

.navMain {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  border: 1px solid black;
}
/*Nav Text Styling*/

.dropContent {
  background: transparent;
  color: #b9b9b9;
}
/*Nav Text Styling*/

.nav-titles {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;
  background: transparent;
}
/*Nav Icons Styling*/

.navIcon {
  width: 15px;
  height: 15px;
  background: transparent;
}
/*Nav Sub Menu*/

.navDropLinks {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  display: block;
  padding-bottom: 6px;
  background: transparent;
}
/*Nav Sub Menu Hyper*/

.navDropLinks > a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}
/*Nav Sub Menu Left Column*/

.navLeft {
  position: absolute;
  left: 10px;
  width: 330px;
  display: inline-block;
  font-size: 11px;
  text-align: left;
  padding-right: 3px;
  background: transparent;
}
/*Nav Sub Menu Center Column*/

.navCenter {
  position: absolute;
  width: 330px;
  left: 357px;
  font-size: 11px;
  text-align: center;
  background: transparent;
}
/*Nav Sub Menu Right Column*/

.navRight {
  position: absolute;
  right: 10px;
  width: 330px;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  padding-left: 3px;
  background: transparent;
}
/*Nav Sub Menu Focus Images*/

.navImage {
  display: inline-block;
  width: 275px;
  height: 120px;
  background: transparent;
}
/*Alt Nav Sub Menus*/

.navMain1 {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  /* Gradient background */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  border: 1px solid black;
}
/*Alt Nav Sub Menus*/

.navMain2 {
  margin: -4px auto;
  position: fixed;
  text-align: left;
  border: 1px solid #777777;
  border-top: none;
  width: 1060px;
  /* Gradient background */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  border: 1px solid black;
}
/*To Line 270: Keyframes for Nav Animation*/

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari and Chrome */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<!--Nav Wrapper-->
<div class="bannerWrap">
  <img class="banner" src="images/general/site/bannerlg.png">
</div>
<div id="navWrapper">
  <ul class="nav">
    <li><a href="#">Final Cut</a>

      <!--Begin Main Div-->
      <div class="navMain">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nave Right-->
      </div>
      <!--End Main Div-->
    </li>
    <li><a href="#">News</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Articles</a>

      <!--Begin Main Div-->
      <div class="navMain2">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Sets</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
    <li><a href="#">Resources</a>

      <!--Begin Main Div-->
      <div class="navMain1">
        <!--Begin Sub Nav-->
        <div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
          <br>
          <br>
          <br>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
          </div>
          <div class="navDropLinks">
            <img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
          </div>
          <br>
          <br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>

        </div>
        <!--End Sub Nav-->
        <!--Begin Nav Center-->
        <div class="navCenter"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End of Nav Center-->
        <!--Begin Nav Right-->
        <div class="navRight"> <span class="nav-titles">Latest News</span>
          <br>
          <img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
          <br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                </span>

        </div>
        <!--End Nav Right-->
        <!--End Main Div-->
    </li>
  </ul>
  <!--End Nav List-->
  </div>

Fiddle

小提琴

I just want a simple fade out without hopefully having to change my structure too much and keeping with CSS.

我只是想要一个简单的淡出，而不希望有太多的改变我的结构和保持CSS。

Thanks for any help!

感谢任何帮助!

3 个解决方案

#1

Natalie is absolutely right, transitions are the way to do this.

娜塔莉绝对是对的，过渡是做到这一点的方式。

The only bits that need a change are your CSS for the /*Drop Down Container*/ and the /*Drop Down On Hover Action*/

唯一需要更改的部分是您的CSS，用于/*下拉容器*/和/*下降到悬停动作*/。

Rather than hiding the divs with display: none; hide them with opacity: 0; then set an opacity transition. All you need to do to show them is put opacity: 1; on the hover state and they'll fade in and out nicely.

而不是用展示来隐藏女主角:没有;用不透明度将其隐藏:0;然后设置不透明度转换。要想显示它们，只需将不透明度设置为:1;在悬停状态，它们会很好地淡出。

In order to have them usable without them appearing when the mouse passes below the menu you need to set their height, padding and borders to 0 then apply those as part of the hover state.

为了使鼠标在菜单下通过时不出现它们，您需要将它们的高度、填充和边框设置为0，然后将它们应用为鼠标悬停状态的一部分。

(Separate hover stated for .navMain, .navMain1 etc could be used if different border styles are required)

(如果需要不同的边界样式，则可以使用.navMain、.navMain1等单独的悬停。)

You can also remove all the keyframes at the bottom of course.

当然，您也可以删除底部的所有关键帧。

New CSS:

新CSS:

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    height: 300px;
    padding: 10px 10px;
    border:1px solid #777777; // removed borders from .navMain, .navMain1 etc
    border: 1px solid black;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: 0;        // added the left: 0; here
    top: 337px;
    height: 0;  // height: 0 when not hovered
    opacity: 0;             // swapped for display:none;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background: #323552;
    background: -moz-linear-gradient(top, #323552, #1a1b24);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
    overflow: hidden;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

Updated Fiddle

更新的小提琴

#2

You can acheive a good fade in/out effect using only transitions. This is how I do it

你只需要转换就可以得到好的渐变效果。我就是这么做的

.sub-menu {
    position: absolute;
    left: -9999em;
    width: 200px;
    background-color: #eee;
    opacity: 0;
    transition: left 0.5s ease 0.5s, opacity 0.5s ease; /* Transition on left position */
}
.main-nav li:hover .sub-menu {
    left: 0;
    opacity: 1;
    transition: opacity 0.5s ease; /* No transition on left position when hovering */
}

If you position the sub menu so that it is off the screen using left: -9999em then apply a transition delay on that property so that it will first fade out, then move offscreen when invisible.

如果您将子菜单定位为使用左:- 999999em将其从屏幕上移除，那么对该属性应用一个转换延迟，以便它首先淡出，然后在不可见时移出屏幕。

But you will need to put another transition to override this when the hover state is activated. This will prevent the position property to be animated on hover-on

但是当鼠标悬停状态被激活时，您需要进行另一个转换来覆盖它。这将防止在hoveron上激活位置属性。

Take a look at this jsFiddle

看看这个小提琴

#3

Following on from Jackson's answer, below is an example of the use of transition delays to achieve the effect.

下面是一个利用过渡延迟来达到效果的例子。

This method is in some ways simpler as you don't have to move all the padding/border settings to the hover state. Instead you move the divs far off left when not hovered, then set a left: 0; on the hover state.

这种方法在某些方面更简单，因为您不需要将所有的填充/边界设置移动到鼠标悬停状态。相反，当不悬停时，你把divs移到离左边很远的地方，然后设置一个左:0;在悬停状态。

The transitions have to be set twice (once for on hover and once for off) because you want the left: 0; to take effect immediately on hover and wait till the opacity has transitioned before moving back off.

转换必须设置两次(一次为悬停，一次为关闭)，因为您想要左:0;在悬停时立即生效，待不透明度发生变化后再后退。

The full syntax for transitions is transition: <property> <duration> <style: ease> <delay: 0s>

转换的完整语法是transition:

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    left: 0;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: -9999em; 
    top: 337px;
    opacity: 0;     
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background: #323552;
    background: -moz-linear-gradient(top, #323552, #1a1b24);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
    overflow: hidden;
    -webkit-transition: opacity .5s ease-in-out, left .5s ease .5s; 
    -moz-transition: opacity .5s ease-in-out, left .5s ease .5s;
    -ms-transition: opacity .5s  ease-in-out, left .5s ease .5s;
    -o-transition: opacity .5s ease-in-out, left .5s ease .5s;
    transition: opacity .5s ease-in-out, left .5s ease .5s;
}

Updated Fiddle

更新的小提琴