Progress Bar or Div over image - html

Question

I would like to simulate a loading effect, so the opacity of the image is changing gradually.
body {
background-color: #aaa;
padding: 10px;
}
#progressbar {
width: 269px;
height: 269px;
background-color: #eee;
clear: both;
}
#progress {
background: #fff; /*-- Color of the bar --*/
height: 269px;
width: 0%;
max-width: 269px;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 269px;
width: 269px;
overflow: hidden;
background: url("http://i57.tinypic.com/acyid2.jpg");
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55);
filter: alpha(opacity=55);
}
#-webkit-keyframes progress {
from { }
to { width: 100% }
}
#-moz-keyframes progress {
from { }
to { width: 100% }
}
#-ms-keyframes progress {
from { }
to { width: 100% }
}
#keyframes progress {
from { }
to { width: 100% }
}
<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>
In my example, the Div is over the image.
I need the image opacity to become clearer, so the inverse of what I have
Image should appear from 0 to 100%
Makes sense?
thanks for any help

Answer 1

You can achieve the effect with the following code:
CSS
#progressBar {
position:relative;
}
#progressImg {
width:391px;
}
#opacObj {
-webkit-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-webkit-animation-fill-mode: forwards;
-moz-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-moz-animation-fill-mode: forwards;
-o-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-o-animation-fill-mode: forwards;
animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
animation-fill-mode: forwards;
width:391px;
height:364px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#-webkit-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#-moz-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#-o-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
HTML
<div id="progressbar">
<img src="http://i57.tinypic.com/acyid2.jpg" border="0" id="progressImg">
<div id="opacObj"></div>
</div>
jsFiddle demo

Answer 2

Change the nesting hierarchy of your objects, namedly progress and pbaranim divs, as this
<div id="progressbar"><div id="pbaranim"><div id="progress" ></div></div></div>
You will progress from there on, by adding another image with the from color, and keep current image as the to color (from and to colors of animation) etc...