Эффект CSS Shimmer с блокировкой JavaScript

Question 1

У меня есть мерцающий компонент React со следующим CSS

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 };
}

Моя домашняя страница довольно тяжело монтируется. Таким образом, анимация замирает примерно на секунду. Я читал, что переход анимации выполняется вне потока https: // www .phpied.com / css-animations-off-the-ui-thread /.

Может ли кто-нибудь помочь мне сделать мой эффект мерцания аналогичным способом вне потока?

javascript css css-animations linear-gradients

3

mohsinulhaq 13 Окт 2019 в 21:52

Answer

Используйте преобразование, как предложено в ссылке. Вот идея с псевдоэлементом:

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

4

Temani Afif 27 Дек 2020 в 21:41

Question 2

Используйте преобразование, как предложено в ссылке. Вот идея с псевдоэлементом:

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

4

Temani Afif 27 Дек 2020 в 21:41

Эффект CSS Shimmer с блокировкой JavaScript

1 ответ

Похожие вопросы

Новые вопросы

javascript