Css动画防止跳转到第一帧

Question

我想为这个指标实现无限旋转。如何阻止动画跳回到第45deg帧？

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

#indicator {
  position: relative;
  width: 80px;
  height: 80px;
}

#indicator:before {
  display: block;
  width: 80px;
  height: 80px;
  background: #0095ff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotate 4s infinite;
  transform: rotate(45deg);
}

#indicator:after {
  display: block;
  width: 80px;
  height: 80px;
  content: "Title";
  display: flex;
  color: white;
  align-items: center;
  font-size: 23px;
  font-family: Times New Roman;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(225deg);
  }
  75% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

<div id="indicator"></div>

Answer 1

只需删除最后一个状态，然后根据需要重新调整每个状态的％。当转换以315deg结束时，它将立即返回到45deg，这相当于315deg，然后动画将再次开始，并且它将始终以相同的方向运行。

＆＃13;

＆＃13;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

#js-waiting-indicator {
  position: relative;
  width: 80px;
  height: 80px;
}

#js-waiting-indicator:before {
  display: block;
  width: 80px;
  height: 80px;
  background: #0095ff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotate 4s infinite;
  transform: rotate(45deg);
}

#js-waiting-indicator:after {
  display: block;
  width: 80px;
  height: 80px;
  content: "Title";
  display: flex;
  color: white;
  align-items: center;
  font-size: 23px;
  font-family: Times New Roman;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
  }
  30% {
    transform: rotate(135deg);
  }
  60% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(315deg);
  }
}

＆＃13;

<div id="js-waiting-indicator"></div>

＆＃13;

＆＃13;

＆＃13;