CSS3: Prevent transition-delay when transition is reversed - html

Question

I'm trying to create an effect where:
The cursor hovers over a box
The bar slides out
As the sliding motion eases out a title appears
The cursor leaves the box
The title begins to disappear as the bar slides back
The bar finishes sliding back
But instead when the cursor leaves the box the delay is invoked again so the title fades out as the bar finishes it's transition back which looks ugly. How can I achieve the desired effect?
HTML:
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS:
.slidingbar{
width: 50px;
height: 50px;
transition: width 2s;
-webkit-transition: width 2s;
}
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
transition: opacity 1s 1s;
-webkit-transition: opacity 1s 1s;
}
.slidingbar:hover{
width: 100%;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
}

Answer 1

You can set different transitions in the base state and in the hover state.
In this case, the delay should be only in the hover state, and the base state should be un-delayed.
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: linear;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: linear;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
demo

Answer 2

If i understood the instructions, try applying the transition on the same element... like this
HTML
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS
.slidingbar{
border: 1px solid #cccccc;
height: 50px;
}
.slidingbar-content{
width: 50px;
margin: 0px;
white-space: nowrap;
overflow: hidden;
opacity: 0;
transition: opacity 1.5s, width 2s ;
-webkit-transition: opacity 1.5s, width 2s;
}
.slidingbar-content:hover{
width: 100%;
opacity: 1;
}
Hope it help you