show placeholder moving image effect css

Solutions on MaxInterview for show placeholder moving image effect css by the best coders in the world

showing results for - "show placeholder moving image effect css"
Gabriele
29 Jan 2020
1<div class="card__image placeholder"></div>
2
3/* CSS */
4.card__image.placeholder {
5    margin-top: 24px;
6    margin-bottom: 4px;
7    position: relative;
8    height: 158px;
9    margin-left: 8px;
10    margin-right: 8px;
11    align-self: stretch;
12    border-radius: 12px;
13    overflow: hidden;
14  	background: #25282c;
15}
16
17.placeholder:after {
18    content: "";
19    position: absolute;
20    width: 100%;
21    height: 100%;
22    background: -webkit-gradient(linear,left top,right top,from(#25282c),color-stop(15%,#151618),to(#25282c));
23    background: linear-gradient(90deg,#25282c,#151618 15%,#25282c);
24    -webkit-transform: translateX(-100%);
25    transform: translateX(-100%);
26    -webkit-animation: placeholder-shimmer 1.25s linear infinite;
27    animation: placeholder-shimmer 1.25s linear infinite;
28    will-change: transform;
29}
30
31@-webkit-keyframes placeholder-shimmer {
32    to {
33        -webkit-transform: translateX(100%);
34        transform: translateX(100%);
35    }
36}
37@keyframes placeholder-shimmer {
38    to {
39        -webkit-transform: translateX(100%);
40        transform: translateX(100%);
41    }
42}