Angular 尝试在角度引导时显示微光效果，但动画被卡住

我试图在引导角度（第一次加载）时显示facebook的微光效果，但动画在第二次加载后被卡住/停止 代码不能包含angular代码，只能包含css&html&js，因为它在angular之前运行

我正在使用这个css&html-

.shine {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px; 
  display: inline-block;
  position: relative; 

  animation-duration: 1s;
  animation-fill-mode: forwards; 
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  }

box {
  height: 104px;
  width: 100px;
}

keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0; 
  }
}

Html:

<ngx-application>
   <div class="box shine"></div>
</ngx-appliaction>

我认为问题在于设置背景位置的动画。当我尝试为其他属性（平移、缩放、旋转等）设置动画时，动画效果非常好。具有缩放比例的元素不断上下缩放，但具有动画背景位置的元素被卡住。如果我在同一个元素上组合动画缩放和背景位置，它也会被卡住

此外，当我在angular的引导后运行动画时，仅在一个随机组件上，动画无限工作。我试着在网上搜索，但还是不知道。

---

非常感谢。

在初始引导后，以Angular模式运行动画，但要更改CSS文件或创建自己的

“shine”

类，但要更改：

animation-iteration-count: infinite; 

到

---

这将阻止它无限运行，因为根据你的帖子，这似乎不是你想要的行为。此外，如果您不想重新创建整个类，您实际上不必重新创建整个类，只需重写此特定属性。

我希望迭代计数是无限的，并且我希望它在加载angular之前运行，问题是这不是无限时间运行，而是运行1秒+-然后停止，我希望它一直运行，直到角度加载。@תשורץ你确定它没有停止，因为角度加载了吗？是的，我尝试了两个框的动画，一个是背景位置动画，另一个是比例动画。缩放框不断变大变小，但背景位置框动画停止设置动画。

animation-iteration-count: 1;