具有阻止 JavaScript 的 CSS Shimmer 效果

Question

我有一个带有以下 CSS 的微光 React 组件background: #ebebeb;background-image: linear-gradient(to right,  #ebebeb 0%, #c5c5c5 20%,  #ebebeb 40%,  #ebebeb 100%);我应用到它的动画关键帧如下：{    0%: { background-position: -468px 0 };    100%: { background-position: 468px 0 };}我的主页在mount上很重。所以动画会冻结大约一秒钟左右。我读到动画过渡是在线程外完成的https://www.phpied.com/css-animations-off-the-ui-thread/谁能帮我以类似的脱线方式做我的微光效果？

Answer 1

按照链接中的建议使用转换。这是一个带有伪元素的想法：

.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>