具有阻止 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 {&nbsp; background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));&nbsp; background-size:0;&nbsp; height: 200px;&nbsp; position:relative;&nbsp; overflow:hidden;}.box::before {&nbsp; content:"";&nbsp; position:absolute;&nbsp; top:0;&nbsp; right:0;&nbsp; width:calc(200% + 200px);&nbsp; bottom:0;&nbsp; background-image:inherit;&nbsp; animation:move 2s linear infinite;&nbsp;}@keyframes move{&nbsp; to {&nbsp; &nbsp; transform:translateX(calc(50% + 100px));&nbsp; }}<div class="box"></div>