CSS3 animation only works on the first hover - html

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