Я осмелюсь предположить, что вы добиваетесь такого результата.
.container {
width: 200px;
height: 50px;
border: 1px solid #000;
position: relative;
margin: 5px;
}
.container.loading:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0,0,0,.55), rgba(0,0,0,1), rgba(0,0,0,.55), rgba(0,0,0,1));
background-size: 400% 400%;
animation: gradient 2.5s ease infinite;
z-index: 10;
}
@keyframes gradient{
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
<div class="container">123</div>
<div class="container loading">123</div>