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