.placeholder { }
.placeholder ul { margin: 0 -1% 20px; }
.placeholder li { float:left; width: 23%; margin: 0 1% 20px; overflow: hidden; box-shadow: 0 0 6px #ddd; transition: .5s ease; position: relative; height:315px; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: rgba(246, 247, 248, 0.5); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; }
.placeholder li .inner { background: #fff; position: absolute; }
.placeholder li .inner.divider { height:13px; left:0; top:185px; width:100%; }
.placeholder li .inner.divider1 { top:205px; }
.placeholder li .inner.divider.bottom { height:90px; top:auto; bottom:0; }
.placeholder li .inner.left { width:15px; left:0; top:198px; height:7px; }
.placeholder li .inner.left1 { top:218px; }
.placeholder li .inner.right { width:20px; top:198px; right:0; height:7px; }
.placeholder li .inner.right1 { width:140px; top:218px; }
.placeholder li:before, .placeholder li:after { position: absolute; content: ""; background-image:url(photo/57254543.cms); background-repeat:no-repeat; }
.placeholder li:before { background-position:-143px -85px; width: 22px; height: 22px; left: 50%; margin-left:-11px; top: 90px; }
.placeholder li:after { background-position:0 -175px; width: 18px; height: 18px; bottom: 12px; right: 8px; }

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}