Make CSS Shimmer Effect Work an Already Loaded Image

CSS Shimmer effect with blocking JavaScript

Use transform as suggested in the link. Here is an idea with pseudo element:

.box {
  background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
  background-size:0;
  height: 200px;
  position:relative;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:calc(200% + 200px);
  bottom:0;
  background-image:inherit;
  animation:move 2s linear infinite; 
}
@keyframes move{
  to {
    transform:translateX(calc(50% + 100px));
  }
}

<div class="box">

</div>

How can I do a CSS3 shimmer animation to an HTML target object?

You can create a diagonal gradient background and slide it from extreme far left to extreme far right on a keyframes timer. Add the following to your CSS file and then add the "shimmer" class to your HTML element. I played with the animation speed using a combination of larger numbers on the background-position-x property in the keyframe, as well as the animation speed (currently 8s) in the animation property of the CSS class.

@keyframes shimmerBackground {
    0% {background-position:-5000px 0}
    100% {background-position:5000px 0}
}

.shimmer
{
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-repeat: repeat-y;
background-position:-5000px 0;
animation: shimmerBackground 8s linear infinite;
}

how to change the linear gradient color in shimmer effect

Don't use mask, use background then you can control the color like you want

* {
  box-sizing: border-box;
}

body{
  background-color: black;
}
/* Float four columns side by side */
.column {
  float: left;
  width: 100px;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  height: 150px;
  text-align: center;
  background :linear-gradient(-60deg,#0000 10%,#0005,#0000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
  background-color: #f1f1f1;
}
.shimmer {
  display:inline-block;
  max-width:200px;
}

.starting{
  margin-left: -10px
}

@keyframes shimmer {
  100% {background-position:left}
}

<div class="row">
  <div class="column shimmer starting">
    <div class="card">

    </div>
  </div>

  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
  
  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
  
  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
</div>

Shimmer effect with DYNAMIC background position?

You could try the vw (viewport width) / vh (viewport height) / vmin (viewport shorter edge) / vmax (viewport longer edge) units.

@keyframes shimmerBackground {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

---

Related Topics