Not positive on what you were trying to accomplish, however I think I have the solution. I also cleaned up your code, it is now minified and easier to read. I also updated for cross browser use. Here is the updated JSFiddle with the necessary fixes: http://jsfiddle.net/mLh7r/34/
HTML:
<div class="wrap selected">
<div class="title-wrap titleAnimation"></div>
<div class="bg-wrap bgAnimation"></div>
</div>
CSS:
@-webkit-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-moz-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-webkit-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@-moz-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
.titleAnimation {
-webkit-animation: titleAnimation ease-in 1s;
-moz-animation: titleAnimation ease-in 1s;
animation: titleAnimation ease-in 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.bgAnimation {
-webkit-animation: bgAnimation ease-in 1s;
-moz-animation: bgAnimation ease-in 1s;
animation: bgAnimation ease-in 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.wrap .title-wrap, .wrap .bg-wrap {
position: absolute;
display: block;
left: 85px;
}
.title-wrap {
position:absolute !important;
text-align: center;
height:29.42px;
}
.bg-wrap {
height:700px;
width:100%;
background:green;
z-index: -1;
}
.wrap .title-wrap {
width:202px;
top:5px;
background:black;
}
.wrap .bg-wrap {
top:35px;
}