CSS3 animation only works on the first hover

Question

I am building a website and i am attempting to animate a :hover of a div so that when a mouse hovers over it another div that is currently at opacity:0 will increase its opacity to 0.8 over the span of 3.5 seconds while concurrently fading down into place.

This will work properly until the second time that i try it and then it will not fade back to 0 opacity when i leave the object with my mouse. The object will stay visible with opacity 0.8.

Hopefully i am making sense.

The fade animations are pulled from Animate.css and inserted directly into my css.

All of my code pertaining to this issue can be found here

.widget-Button4.widget-header.widget-html-widget.widget p
{
  background:none;
  height: 50px;
  position: absolute;
  top: 250px;
  left: 1000px;
}

#Hosting
{
  background-image: url("images/header_rollout_expandedbg.png");
  background-size:100%;
  background-repeat:no-repeat;
  margin: 0 0 1em;
  font-size: 11px;
  line-height: 1.538em;
  float: left;
  padding: 20px 14px 14px 14px;
  position: absolute;
  top: 274px;
  left: 909px;
  z-index: 0;
  -webkit-animation:fadeOutUp 3.5s; /* Chrome, Safari, Opera */
  animation:fadeOutUp 3.5s;
  -webkit-transition: opacity 3.5s ease-in-out;
  -moz-transition: opactiy 3.5s ease-in-out;
  -ms-transition: opacity 3.5s ease-in-out;
  -o-transition: opacity 3.5s ease-in-out;
  transition: opacity 3.5s ease-in-out;
  filter: alpha(opacity=0);
  opacity: 0;
}

#HostingButton
{
  background-image: url("images/header_rolloutbg_static_complete.png");
  background-size:100%;
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 263px;
  left: 1007px;
  -webkit-transition: all 3.5s ease-in-out;
  -moz-transition: all 3.5s ease-in-out; 
  -o-transition: all 3.5s ease-in-out; 
  -ms-transition: all 3.5s ease-in-out;
  z-index: 50;
}

#HostingButton:hover
{
  -webkit-transform: rotate(1080deg); 
  -moz-transform: rotate(1080deg); 
  -o-transform: rotate(1080deg);
  -ms-transform: rotate(1080deg);
}

#HostingButton:hover + #Hosting
{
  -webkit-animation:fadeInDown 3.5s; /* Chrome, Safari, Opera */
  animation:fadeInDown 3.5s;
  transition: none;
  -o-transition: none;
  -ms-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

@-webkit-keyframes fadeInDown
{
    0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@keyframes fadeInDown
{
0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@-webkit-keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

}

@keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
}

And the HTML to go along with it here

<p>
    Hosting
</p>
<div id="HostingButton">
</div>
<div id="Hosting">
    <div id="rollouttext">
        Hello
    </div>
</div>

I managed to get the opacity part of it that i am having trouble with working in JSFiddle. http://jsfiddle.net/7uR8z/1499/

It is the same code that i am using however, i think i might have some conflict and i am having a hell of a time trying to figure it out.

Any help would be appreciated!

Answer 1

How you are describing it is where there are 2 divs. The first div is visible and the second div is 0 opacity. When you hover the first div is 0 opacity and the second div is 80% opacity. This happens over 3.5 seconds.

I made the 2 states in different divs .item and .description. Not too sure why you had zoom in there? Let me know if this is not what you're trying to do.

.container {
    height:200px;
    width:200px;
    position:relative;
}
.item {
    height:200px;
    width:200px;
    position:absolute;
    background:red;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}
.item:hover {
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton {
    position:absolute;
    height:200px;
    width:200px;
    background:green;
    display:visible;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

Check out the demo jsfiddle