Convert SVG SMIL linear gradient animation to CSS animation-CodePudding

I have a piece of SMIL (linear gradient) animation that I want to convert to CSS:

<linearGradient id={idGradient}>
  <stop offset="0%" stopColor="#cfcfcf" stopOpacity={1}>
    <animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" />
  </stop>

  <stop offset="50%" stopColor="#ecebeb" stopOpacity={1}>
    <animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" />
  </stop>

  <stop offset="100%" stopColor="#cfcfcf" stopOpacity={1}>
    <animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" />
  </stop>
</linearGradient>

This is what I have been able to figure out so far in terms of CSS:

.shimmer {
 background: #cfcfcf;
 background-image: linear-gradient(to right, #cfcfcf 0%, #ecebeb 50%, #cfcfcf 100%);
 animation-duration: 2s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-name: placeholder
}

@keyframes placeholder {

0% { ? }
50% { ? }
100% { ? }

}

But I need help with what am I suppose to write in the animation @keyframes.

The output is suppose to look something like this

CodePudding user response：

If you want use this for showing before load data, it's better that use : Skeleton React

If no then use this code

body {
  margin:0;
  overflow:hidden;
}

/* blue bar */
div {
  height:40px;
  width:300px;
  background:#ddd;
  z-index:0;
  position: relative;
}

/* text */
span {
  color:#fff;
  left:50%;
  transform:translate(-50%,-50%);
  position: absolute;
  display: inline-block;
  font-size:30px;
  font-family:'open sans',sans-serif;
  letter-spacing:-1px;
  font-weight:bold;
}
span {
  top:50%;
}
/* Shine */
div:after {
    content:'';
  top:0;
    transform:translateX(100%);
    width:100%;
    height:220px;
    position: absolute;
    z-index:1;
    animation: slide 5s infinite;
     
  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
}

/* animation */

@keyframes slide {
    0% {transform:translateX(-100%);}
    100% {transform:translateX(100%);}
}

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