image placeholder animation css

1 --theme-background-highlight: #25282c;
2 --theme-background-primary: #151618;
3
4.card__image {
5    position: relative;
6    height: 158px;
7    margin-left: 8px;
8    margin-right: 8px;
9    -ms-flex-item-align: stretch;
10    align-self: stretch;
11    border-radius: 12px;
12    overflow: hidden;
13}
14.placeholder {
15    position: relative;
16    overflow: hidden;
17    background: var(--theme-background-highlight);
18}
19.placeholder:after {
20    content: "";
21    position: absolute;
22    width: 100%;
23    height: 100%;
24    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)));
25    background: linear-gradient(90deg, var(--theme-background-highlight), var(--theme-background-primary) 15%, var(--theme-background-highlight));
26    -webkit-transform: translateX(-100%);
27    transform: translateX(-100%);
28    -webkit-animation: placeholder-shimmer 1.25s linear infinite;
29    animation: placeholder-shimmer 1.25s linear infinite;
30    will-change: transform;
31}
32@-webkit-keyframes placeholder-shimmer {
33    to {
34        -webkit-transform: translateX(100%);
35        transform: translateX(100%);
36    }
37}
38@keyframes placeholder-shimmer {
39    to {
40        -webkit-transform: translateX(100%);
41        transform: translateX(100%);
42    }
43}