将 SVG SMIL 线性渐变动画转换为 CSS 动画

Question

我有一段 SMIL（线性渐变）动画要转换成 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>

这是我到目前为止在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% { ? }

}

但是我需要帮助我想在动画中写什么 @keyframes。

输出应该看起来像这样

Answer 1

如果你想用它来显示加载前的数据，最好使用： Skeleton React

如果否，则使用此代码

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>

将 SVG SMIL 线性渐变动画转换为 CSS 动画

Convert SVG SMIL linear gradient animation to CSS animation

css

animation

smil

svg-animate

reactjs