Answers for "image placeholder animation css"

image placeholder animation css

--theme-background-highlight: #25282c;
 --theme-background-primary: #151618;

.card__image {
    position: relative;
    height: 158px;
    margin-left: 8px;
    margin-right: 8px;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 12px;
    overflow: hidden;
}
.placeholder {
    position: relative;
    overflow: hidden;
    background: var(--theme-background-highlight);
}
.placeholder:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(var(--theme-background-highlight)), color-stop(15%, var(--theme-background-primary)), to(var(--theme-background-highlight)));
    background: linear-gradient(90deg, var(--theme-background-highlight), var(--theme-background-primary) 15%, var(--theme-background-highlight));
    -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%);
    }
}