show placeholder moving image effect css code example

Example: 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%);
    }
}