show placeholder moving image effect css
<div class="card__image placeholder"></div>
/* CSS */
.card__image.placeholder {
margin-top: 24px;
margin-bottom: 4px;
position: relative;
height: 158px;
margin-left: 8px;
margin-right: 8px;
align-self: stretch;
border-radius: 12px;
overflow: hidden;
background: #25282c;
}
.placeholder:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear,left top,right top,from(#25282c),color-stop(15%,#151618),to(#25282c));
background: linear-gradient(90deg,#25282c,#151618 15%,#25282c);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: placeholder-shimmer 1.25s linear infinite;
animation: placeholder-shimmer 1.25s linear infinite;
will-change: transform;
}
@-webkit-keyframes placeholder-shimmer {
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes placeholder-shimmer {
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}