Question

.shimmer {
  width: 211px;
  overflow: hidden;
}

.shimmer::before {
  content: "";
  position: absolute;
  height: 65%;
  width: 45%;
  left: -75px;
  background-image: linear-gradient(to right, black, 50%, transparent);
  transform: rotate(-70deg);
  animation-duration: 100s;
  animation-iteration-count: infinite;
}

@keyframes test {
  0% {
    left: -75px;
  }
  5% {
    left: 200px;
  }
  100% {
    left: 20px;
  }
}

我需要在特定时间在:: before元素上运行动画。我已经使用Javascript在头部输入了动画名称。

var styleElem = document.head.appendChild(document.createElement("style"));
styleElem.innerHTML = ".shimmer::before {animation-name:test ;}"

该函数运行时，我需要动画在1秒钟内开始和结束，然后每隔100秒重复一次。为了测试速度等，我希望以5％的速度完成（因为动画只需要大约1秒钟），然后它将等待（隐藏），因此当100s到时，可以再次运行。

JavaScript运行正常，动画开始。问题是，关键帧％并未考虑在内，它只会动画100秒钟以上？我在做什么错了？

Answer 1

0%{

左：-75px;

};

这里是半冒号！！！！

Answer 2

将200px设置为100％：

100% {left: 200px;}

动画关键帧％没有正确运行

2 个答案: