pausing an animation at a particular time and resuming-CodePudding

I want the square to start playing the animation for 5s then, stop playing the animation for 3s and then continue. Is this possible only using CSS3?

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 20s;
  animation-play-state: running;
  animation-iteration-count:infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div ></div>

CodePudding user response：

Since animation-duration is 20s, then in the @kayframes, 25% = 5s => 5% = 1s => 15% = 3s (between 25% - 40%)

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation: rotate 20s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  40% {
    transform: rotate(90deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

<div ></div>