Fade out sides of div tag with image background CSS

Question

I'm building a site, and I have an animating image in my header. This image is a coloured bar that animates from right to left on a loop to give the impression of it infinitely moving left.

What I would like to accomplish, is to have a fade in/out effect on the left and the right side of the image, without affecting the animation of it's background image.

This is my HTML code:

<div id="hbaranim"><div id="hbarchild"></div></div>

And my current CSS (with just the animating image):

#hbaranim {
width: 100%;
height: 5px;
overflow-x: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
#hbaranim #hbarchild {
position: relative;
width: 8524px;
height: 5px;
background-image: url("img/colorbartile.png");
background-repeat: repeat-x;   
-webkit-animation: hbaranim_roll linear 245s infinite;
}
@-webkit-keyframes hbaranim_roll {
from { right: 0px; }
to { right: 2131px; }
}

JSFiddle

Eddit: Currently using the HTML is using two div tags, but they don't have any content in them, so using just one would probably be better (not sure how to that to be honest...)

Eddit 2: Just to clarify, the animating image is positioned over a gradient background, so just putting another gradient over the image like some of you suggested won't work in this case. It really need's to be transparent at the sides.

Eddit 3: Some of you also suggested using a CSS gradient instead of an image, but the image I use on my actual site contains some other details that would be impossible to replicate in CSS. For this example I used an image that could indeed be replicated with a CSS gradient quite easily.

Eddit 4: Updated the fiddle to include the whole header

Answer 1

You could use absolutely positioned pseudo elements on the parent element with gradient backgrounds to achieve this. You can also achieve the same effect with a single div.

UPDATE: Following on from edit 3 in the original question, the rainbow gradient I've used below can be replaced with an image file, the exact same principles apply.

• More information on pseudo elements
• More information on gradients

EXAMPLE

*{box-sizing:border:box;}
body{margin:0;}
.header{
    background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);
    box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);
    height:150px;
    position:relative;
}
h1{
    color:#fff;
    font-family:arial;
    font-size:48px;
    padding:25px 0 0;
    margin:0;
    text-align:center;
}
h2{
    color:#fff;
    font-family:arial;
    font-size:24px;
    line-height:25px;
    margin:0;
    text-align:center;
}
#hbaranim{
    -webkit-animation:hbaranim_roll linear 10s infinite;
    animation:hbaranim_roll linear 10s infinite;
    background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;
    background-size:200%;
    bottom:10px;
    height:5px;
    position:absolute;
    width:100%;
}
#hbaranim::before,#hbaranim::after{
    content:"";
    display:block;
    height:100%;
    position:absolute;
    top:0;
    width:25%;
    z-index:1;
}
#hbaranim::before{
    background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));
    left:0;
}
#hbaranim::after{
    background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));
    right:0;
}
@-webkit-keyframes hbaranim_roll{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:200% 0;
    }
}
@keyframes hbaranim_roll{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:200% 0;
    }
}

<div class="header">
  <h1>Name of Site</h1>
  <h2>www.site.nl</h2>
  <div id="hbaranim"></div>
</div>

---

If you're feeling adventurous, you can do this without the nested div (Fiddle) or even without the parent div (Fiddle)

---

The following snippet was provided as an example while awaiting Ties' confirmation that removing the child div was an option and is included below as a matter of record.

#hbaranim{
    overflow:hidden;
    padding:10px 0;
    position:relative;
    width:100%;
}
#hbaranim #hbarchild{
    background-color:#000;
    height:20px;
    position:relative;
    width:8524px;
    z-index:1;
}
#hbaranim::before,#hbaranim::after{
    content:"";
    display:block;
    height:20px;
    position:absolute;
    top:10px;
    width:20%;
    z-index:2;
}
#hbaranim::before{
    background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
    left:0;
}
#hbaranim::after{
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
    right:0;
}

<div id="hbaranim">
    <div id="hbarchild"></div>
</div>