我正在建立一个网站，我的标题中有一个动画图像。这个图像是一个彩色条，在一个循环中从右到左动画，给人一种无限向左移动的印象。
我想要完成的是在图像的左侧和右侧产生淡入/淡出效果，而不影响其背景图像的动画。
这是我的HTML代码：
<div id="hbaranim"><div id="hbarchild"></div></div>
我现在的CSS（只有动画图像）：
#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; }
}
Eddit：目前使用HTML正在使用两个div标签，但它们中没有任何内容，因此只使用一个可能会更好（不确定如何说实话......）< / p>
Eddit 2：为了澄清，动画图像位于渐变背景上，因此只需在图像上放置另一个渐变，就像你们中的一些建议在这种情况下无法工作。它确实需要在两侧透明。
Eddit 3：有些人还建议使用CSS渐变而不是图像，但我在实际网站上使用的图像包含一些其他无法在CSS中复制的细节。对于这个例子，我使用的图像确实很容易用CSS渐变复制。
Eddit 4：更新了小提琴以包含整个标题
答案 0 :(得分：3)
您可以在具有渐变背景的父元素上使用绝对定位的伪元素来实现此目的。您还可以使用单个div实现相同的效果。
更新：继续原始问题中的编辑3后，我在下面使用的彩虹渐变可以替换为图像文件，完全相同的原则适用。
示例
*{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>
如果您有冒险精神，可以在没有父div（{{}}的情况下，在没有嵌套div（Fiddle）或甚至的情况下执行此操作{3}}）
在等待Ties＆＃39;时，提供了以下代码段作为示例。确认删除孩子div是一种选择，并作为记录事项包含在下面。
#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>